angular-bootstrap accordion databinding issue
angular-ui, angularjs, javascript
Solution
Binding to an attribute of the scope directly is almost a bad idea, because many directives define their own scope, and if your widget (the select box) is inside such a directive, you will in fact bind to an attribute of the child scope rather than binding to an attribute of the controller scope.
The rule of thumbs is thus: always have a dot in your ng-model. The form controls should modify an object of your scope, and not your scope directly.
In your controller:
$scope.selection = {};
In your view:
<select ng-model="selection.category" ...>
Also, note that you're using the same ID to identify two select boxes. That will make your DOM invalid. An ID identifies an element uniquely.
Problem
I have 2 drop downs with same models, one inside accordion and another outside. The outside drop down works fine in terms of 2-way databinding but the one inside the accordion seems to have only 1-way binding, in other words selecting in the UI is not setting the model value. I found a suggestion here that using `ng-change` will fix this problem. It fixed for `<textarea>` but not for `<select>`. Wondering this could be bug in angular-ui. Can someone help on this issue. Thanks in advance! outside accordion ``` <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> ``` Inside accordion ``` <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> ``` my model `categories` is an array of string: example: ``` "categories": [ "Admin API", "Admin License", "adminGUI", "antennahouse", "App Builder", "Backup/Restore", "Basis"] ``` ng-change function ``` $scope.setCategory = function(category) { $scope.category = category; }; ```