title: ng-class to highlight active menu item based on ng-repeat. AngularJS
body: <p>I have a menu based on the following example:</p>
  
  <pre><code> &lt;nav  data-ng-controller="menuContrl" class="menuItem"&gt;
       &lt;a  data-ng-class='{active:isActive("/{{item.path}}")}' data-ng-repeat="item in menu" href="#/{{item.path}}"&gt;
           &lt;span&gt;{{item.title}}&lt;/span&gt;
       &lt;/a&gt;
   &lt;/nav&gt;
  </code></pre>
  
  <p>item is an object, containing menu item information. Here is the JavaScript code for the directive and controller:</p>
  
  <pre><code>var app = angular.module("coolApp",[]);
  
  function menuContrl($scope,$location){
      $scope.menu=menu;
      $scope.isActive = function(path){
          return ($location.path()==path)
      } 
  }
  </code></pre>
  
  <p>The problem is that <code>ng-class</code> sets <code>class</code> to <code>active</code> only once during page rendering, but when you click on a menu items, nothing happenes. I suppose this is because the menu itself is not reloaded and I just change data inside <code>&lt;div&gt;</code>. So how can I make it work without reloading the whole page?</p>