Why isn't ng-class working?

Question

I want to highlight currently selected menu item with AngularJS. I have this HTML:

<li ng-repeat="m in menuLinks">
    <a ng-class="{active : isActive('{{m.url}}')}" href="{{m.url}}" active-link="active" onclick="closeMenu()">{{m.title}}</a>
</li>

And this in the controller:

$scope.isActive = function (viewLocation) {
        alert(viewLocation);
        if ($location.path().indexOf(viewLocation) === 0) {
            return true;
        } else {
            return false;
        }
};

The function isActive() gets called because alerts show up, but when I inspect the elements I get this:

<a class="ng-binding" ng-class="{active : isActive('/#/sessions')}" href="/#/sessions" active-link="active" onclick="closeMenu()">Sessions</a>

What am I missing here?

Answer 1

You don't need the expression in ng-class, just use it like this:

 <a ng-class="{active : isActive(m.url)}" ng-href="{{m.url}}" active-link="active" ng-click="closeMenu()">{{m.title}}</a>

and I recommend using ng-href instead of just href and ng-click instead of onclick ;)