I have a very strange issue. I have to set an active class on the appropriate <li> when the $scope.selectedCat == cat.id. The list is generated with ng-repeat. If selectedCat is false, the 'Browse All Categories' list item (outside of ng-repeat) is set to active. setCat() sets the value of the $scope.selectedCat variable:

<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>

When the page loads, everything works fine (snapshot from 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 when I set $scope.selectedClass to a cat.id value, the condition within ng-class gets evaluated correctly, but ng-class won't 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}>

Please note that in the first line active class stays set, while ng-class evaluates to false. In the last line active is not set, while ng-class evaluates to true.

Any ideas why it doesn't work? What's the correct Angular way of doing this?