I am encountering a peculiar issue. I need to assign an active class to the appropriate <li> element when $scope.selectedCat == cat.id. The list is dynamically generated using ng-repeat. If selectedCat is false, the 'Browse All Categories' list item (outside of ng-repeat) should be set to active. The value of the $scope.selectedCat variable is modified by the setCat() function:
<div id="cat-list" ng-controller="CatController">
<li ng-class="{'active': {{selectedCat == false}}}">
<a>
<div class="name" ng-click="setCat(false)" >Browse All Categories</div>
</a>
</li>
<li class="has-subcat" ng-repeat="cat in cats | filter:catsearch" ng-class="{'active': {{selectedCat == cat.id}}}">
<a>
<div cat class="name" ng-click="setCat({{cat.id}})" ng-bind-html="cat.name | highlight:catsearch"></div>
</a>
</li>
</div>
Upon page load, everything functions correctly as shown in FireBug:
<li ng-class="{'active': true}" class="ng-scope active">
<!-- ngRepeat: cat in cats | filter:catsearch -->
<li class="has-subcat ng-isolate-scope" ng-repeat="cat in cats | filter:catsearch" ng-class="{'active': false}">
However, after setting $scope.selectedClass to a cat.id value, the condition within ng-class is being evaluated accurately, but ng-class fails to update the classes accordingly:
<li ng-class="{'active': false}" class="ng-scope active"> <!--Right here!-->
<!-- ngRepeat: cat in cats | filter:catsearch -->
<li class="has-subcat ng-isolate-scope" ng-repeat="cat in cats | filter:catsearch" ng-class="{'active': true}">
It is worth noting that in the first line, the active class remains set even though ng-class evaluates to false. In the last line, active is not set despite ng-class evaluating to true.
Do you have any insights into why this behavior is occurring? What would be the proper Angular approach to resolve this issue?