The following code doesn't work -
<div ng-init="selected=-1">
<ul ng-repeat="x in arr">
<li ng-click="selected = $index">...</li>
</ul>
When I click on one of the lis, the variable selected remains as -1. But the following does work -
<div ng-init="selected=-1">
<ul ng-repeat="x in arr">
<li ng-click="setTo($index)">...</li>
</ul>
$scope.setTo = function(index){selected = index;}
Why is that? Nothing functional seems to have changed.
ng-repeat directive creates it's own scope for each item in arr, so when expression selected = $index is executed, the new property selected is created on that scope, at the same time parent scope remains untouched.
Is why your selected property does not change in the first case.
$parent.selected = $index it would work?
Since the ngRepeat directive creates its own scope, you need to refer to $parent.selected in the first example:
<li ng-click="$parent.selected = $index">
$parentthough..ng-initfor initializing a variable outside ng-repeat. it should actually be done in the controller. If you look at official documentation it statesThe only appropriate use of ngInit is for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.