Angularjs和类在菜单项上处于活动状态

Question

在我的index.html页面中，我有一个带有两个项目的导航栏，我想要设置类＃34;活动＆＃34;所选项目。

我在这里实施了解决方案：

StackOverflow solution

<div class="collapse navbar-collapse" ng-controller="HeaderController">
<ul class="nav navbar-nav">
    <li ng-class="{ active: isActive('/')}"><a href="/">Home</a></li>
    <li ng-class="{ active: isActive('/dogs')}"><a href="/dogs">Dogs</a></li>
    <li ng-class="{ active: isActive('/cats')}"><a href="/cats">Cats</a></li>
</ul>

function HeaderController($scope, $location) 
{ 
    $scope.isActive = function (viewLocation) { 
       return viewLocation === $location.path();
   };
}

它可以正常工作，但在页面渲染过程中，函数isActive被多次调用（这里多于三次）。

为什么会出现这种情况？