title: How to update AngularJS directive when URL is changed?
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/12295983/set-active-tab-style-with-angularjs">Set active tab style with AngularJS</a>  </p>
  </blockquote>
  
  
  
  <p>I'm using AngularJS and trying to add a "current" class to my menu whenever that tab's content is being displayed. This is what I have so far, and it works fine when loading the page:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul id="nav"&gt;
      &lt;li&gt;&lt;a href="#/one" class="highlighttab"&gt;One&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#/two" class="highlighttab"&gt;Two&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>myModule.directive('highlighttab', function($location) {
      var currentPath = "#" + $location.path();
  
      return {
          restrict: 'C',
          link: function(scope, element, attrs) {
              var href = element.attr("href");
              if (currentPath == href)
              {
                  element.addClass("current");
              }
          }
      };
  });
  </code></pre>
  
  <p>This will add the 'current' class to the correct <code>&lt;a&gt;</code> tag when the page url is <code>#/one</code> or <code>/#two</code></p>
  
  <p>The problem is if I click the second tab, the class does not get added to it. I imagine I need some way to get the code inside the directive to be re-run when the URL changes. Is there any way to do that ?</p>