AngularStrap bs-select does not update ng-model
I am using the AnglesStraps bs-select directive to add a multiple choice button to one of my views. I am trying to look at the values in this select box and run the search anytime the values change.
My select button looks like this.
<button type="button" class="btn btn-primary" ng-model="subject_list" data-multiple="1"
data-placeholder="All subjects" ng-options="subject.id as subject.name for subject in subjects" bs-select>
Action <span class="caret"></span>
</button>
The problem is that $ scope.subject_list never gets populated. The selection seems to work fine and the ui looks good, but the ng-model is never populated with anything.
In my controller, I initialize $ scope.subject_list with an empty array and then check the $ watch function to see when it changes. Nothing ever gets fired. I even wrote a small function to print the $ scope.subject_list value in a second and it is always empty.
$scope.subject_list = [];
$scope.$watch('subject_list', $scope.update_search);
$scope.update_search = function(){
console.log($scope.subject_list);
};
Any thoughts on what's going on? This worked for me at some point, so I'm either doing something stupid or a recent update was breaking the situation.
Update
This is similar to the scope inheritance problem. I have all kinds of areas that could be part of the problem. However, I was able to get this working by doing everything on rootScope. So that...
<button type="button" class="btn btn-primary" ng-model="$root.subject_list" data-multiple="1"
data-placeholder="All subjects" ng-options="subject.id as subject.name for subject in subjects" bs-select>
Action <span class="caret"></span>
</button>
and
$rootScope.subject_list = [];
$rootScope.$watch('subject_list', function(){
console.log('change');
});
I'm sure this is not the best way to do it, but I cannot figure out what is wrong with my scopes.
source to share
The problem here boiled down to the issue of the problem. I used ui.router and $ stateProvider with many nested states and views.
I had one abstract state that I set for the controller for all sub-states.
.state('profiles.search',{
url: '/search',
abstract: true,
template: '<ui-view/>',
controller: 'SearchCtrl'
})
.state('profiles.search.classrooms', {
url: '/classrooms',
templateUrl: 'views/classrooms/search.html',
data: {
update_classrooms: true
}
})
What I didn't understand is that when the templateUrl state for the 'profiles.search.classroom' state is rendered, it gets its own scope, which is inherited from the 'profiles.search' scope, where all my scope variables live in SearchCtrl ...
So, I can initialize data from SearchCtrl, but it doesn't bind to the view because it's its own scope.
Moral of the story, make sure you know what area you are working in.
source to share