Проблема привязки данных аккордеонистов

Question

У меня есть 2 выпадающих с одинаковыми моделями, один внутри аккордеона, а другой снаружи. Внешний выпадающий список работает нормально с точки зрения двухсторонней привязки данных, но тот, что внутри аккордеона, кажется, имеет только одностороннюю привязку, другими словами, выбор в пользовательском интерфейсе не устанавливает значение модели. Я нашел здесь предложение, что с помощью ng-change исправит эту проблему. Это исправлено для <textarea> но не для <select>, Интересно, это может быть ошибка в Angular-UI. Может кто-нибудь помочь по этому вопросу. Заранее спасибо!

внешний аккордеон

 <div class="form-group">
              <label class="col-md-2 control-label" for="category">Category</label>
              <div class="col-md-3">
                <select id="category" ng-model="category" name="category" type="text" class="form-control">
                    <option ng-repeat="category in config.categories.sort()"  value="{{category}}">
                    {{category}}</option>
                </select>
              </div>
            </div> 

Внутри гармошка

<accordion close-others="false">
    <accordion-group>
 <div class="form-group">
              <label class="col-md-2 control-label" for="category">Category</label>
              <div class="col-md-3">
                <select id="category" ng-model="category" ng-change="setCategory(category)"  name="category" type="text" class="form-control">
                    <option ng-repeat="category in config.categories.sort()"  value="{{category}}">
                    {{category}}</option>
                </select>
              </div>
            </div> 
  </accordion-group>
  </accordion>

моя модель categories это массив строк:

пример:

"categories": [
            "Admin API",
            "Admin License",
            "adminGUI",
            "antennahouse",
            "App Builder",
            "Backup/Restore",
            "Basis"]

функция смены нг

 $scope.setCategory = function(category) {
     $scope.category = category;
 };

Answer 1

Привязка к атрибуту области видимости напрямую является почти плохой идеей, потому что многие директивы определяют свою собственную область видимости, и если ваш виджет (поле выбора) находится внутри такой директивы, вы на самом деле скорее будете привязывать к атрибуту дочерней области видимости чем привязка к атрибуту области контроллера.

Правило большого пальца таково: всегда есть точка в вашей ng-модели. Элементы управления формой должны изменять объект вашей области, а не вашу область напрямую.

В вашем контроллере:

$scope.selection = {};

По вашему мнению:

<select ng-model="selection.category" ...>

Также обратите внимание, что вы используете один и тот же идентификатор для идентификации двух полей выбора. Это сделает ваш DOM недействительным. Идентификатор идентифицирует элемент однозначно.