title: AngularJS sidebar link to stay active when clicked
body: <p>I am creating a sidebar based off of this one </p>
  
  <p><a href="http://plnkr.co/edit/xzcjStdvmkI2rpfMzLjI?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/xzcjStdvmkI2rpfMzLjI?p=preview</a> found from <a href="http://devartisans.com/articles/sidebar-navigation-using-angular" rel="nofollow noreferrer">this tutorial</a></p>
  
  <p>However I want to keep the selection active once the link is clicked. I've tried adding data-toggle, but that seems to work for nav-pills instead of navbar. I also found an is-active-nav directive that I've attempted to implement:</p>
  
  <pre><code>angular.module('sidebarmodule')
      .directive('isActiveNav', ['$location', function ($location) {
      return {
          restrict: 'A',
          link: function (scope, element) {
              scope.location = $location;
              scope.$watch('location.path()', function (currentPath) {
                  if ('/#' + currentPath === element[0].attributes['href'].nodeValue) {
                      element.parent().addClass('active');
                  } else {
                      element.parent().removeClass('active');
                  }
              });
  
          }
      };
  }]);
  </code></pre>
  
  <p>That I call in the sidebar template like so: </p>
  
  <pre><code>&lt;li&gt; &lt;a is-active-nav href="#"&gt;Link1&lt;/a&gt; &lt;/li&gt;
  </code></pre>
  
  <p>Another approach I tried is in my controller adding   <code>$scope.isActive = function (viewLocation) { return viewLocation === $location.path(); };</code> and then adding to the template: <code>&lt;li ng-class="{ active: isActive('/importinvoice')}"&gt;&lt;a href="#/firstlink"&gt;First Link&lt;/a&gt;&lt;/li&gt;</code></p>
  
  <p>However, nothing I do will keep the sidebar elements highlighted after navigating to that page. I am trying to keep out of jQuery as I want it to be an AngularJS solution only. </p>
  
  <p>I tried most of the solutions from this <a href="https://stackoverflow.com/questions/12592472/how-to-highlight-a-current-menu-item">stackoverflow answer</a> but can't get any of them to work on the plunker.</p>