I'm trying to create a picker with Bootstrap Dropdown and AngularJS.
<li ng-repeat="item in list"><a ng-click="current = item">Dynamic set {{item}}</a></li>
When I use ng-click statically in the list, it works fine (example 4 and 5) But when I use ng-click in ng-repeat, it won't update the value (example 1 to 3)
What can I do ?
It is a known problem with scoping in directives. You can read the article The Nuances of Scope Prototypal Inheritance to learn more about the scoping in angular js.
You need to change the ng-repeat to
<li ng-repeat="item in list">
<a ng-click="$parent.current = item">
Dynamic set {{item}}
</a>
</li>
Demo: Fiddle
For explanation of the problem, you can read my answer to this question
One option is to use a setter function within ng-click
HTML:
<li ng-repeat="item in list"><a ng-click="setCurrent( item)">Dynamic set {{item}}</a></li>
JS
function MyCtrl($scope) {
$scope.list = [1,2,3];
$scope.setCurrent=function(val){
$scope.current =val;
}
$scope.current = 0;
}
There's an angularjs directive that does exactly that: https://gist.github.com/andyvr/5205764
Here's the jsfiddle with examples: http://jsfiddle.net/M32pj/1/
Sample:
<select ng-model="example1" bs-selectbox>
<option value="1">One</option>
<option value="2">Two</option>
</select>
