Within a view, I am utilizing an ngRepeat loop where each item has a custom toggle control linked to a $scope variable in the following manner:
<a ng-repeat="item in items" ng-click="isOn = !isOn" ng-class="{on: isOn}">
Toggle!
</a>
Upon click, the isOn variable toggles as expected, but interestingly, it only affects the specific item that was clicked. Considering that isOn is initialized in the controller as $scope.isOn = false, I would anticipate all items to be updated simultaneously.
However, if I toggle the variable using a controller method, then magically all the items get updated!
<a ng-repeat="item in items" ng-click="toggle()" ng-class="{on: isOn}">
Toggle!
</a>
--- controller ---
$scope.toggle = function() {
$scope.isOn = !$scope.isOn;
}
What could be the reasoning behind this behavior? Perhaps the use of ngRepeat generates distinct scopes for each item?