I've encountered a situation like this before.
Let's assume the controller has these variables:
$scope.valueArr = ['Hello', 'No', 'Yes'];
$scope.myValue = 'Hello';
And there is an ng-repeat as follows:
<li ng-repeat="value in valueArr" ng-class="{'active' : myValue == value}"><a>{{value}}</a> </li>
If I do this:
<a ng-click="myValue = value"> </a>
The new element gets the class, but the previous one loses it.
However, if I try this instead:
<a ng-click="setMyValue(value);"> </a>
and define the function in the controller:
$scope.setMyValue = function(value){$scope.myValue = value}
Only the last clicked element stays active, showing that a function is necessary for re-rendering. Can someone explain why this happens and when to use each method?
This case is just one example where re-rendering issues come up.