title: Changing color of active tab
body: <p>Fairly new to AngularJS and I'm also using Bootstrap CSS.</p>
  
  <p>I have a main page and I'm using ngRoute to load html templates.
  I want the active navigation tab to change color whenever new template is loaded</p>
  
  <p>I have something like</p>
  
  <pre><code>&lt;div class="nav"&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#/"&gt;HOME&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#about"&gt;ABOUT&lt;/a&gt;&lt;/li&gt; 
        .....
  
  $routeProvider
      .when('/', {
          templateUrl : 'home.html',
          controller  : 'mainCtrl',
      })
      .when('/about', {
          templateUrl : 'about.html',
          controller  : 'mainCtrl',
      })
  </code></pre>
  
  <p>I've seen some answers where you dynamically add/remove 'active' class and yes that worked for me but I want custom color.</p>
  
  <p>I generate a random color and save it in $scope.randomColor. I want to use that color as active color. </p>
  
  <p>I have a directive that simply changes the color for active and hover. I wish I could just add and remove those to anchor tags based on which page a user is looking at.</p>
  
  <pre><code>.directive('ngHover', function() {
    return {
      restrict: 'A',
      link: function(scope, element) {
          element
          .on('mouseenter',function() {
              element.css('color', scope.backgroundColor);
          })
          .on('mouseleave',function() {
              element.css('color','#333');
          });
      }
    }
  })
  .directive('ngActive', function() {
    return {
      restrict: 'A',
      link: function(scope, element) {
          element.css('color', scope.backgroundColor);
      }
    }
  });
  </code></pre>
  
  <p>Anyone have an idea how to achieve what I want to do? It seems so easy to do with Jquery but I'm learning Angular so I want to use that only if possible.</p>
  
  <p><strong>Edit</strong></p>
  
  <p>I tried adding 'active' class method but also changed the color of active class </p>
  
  <pre><code>var el = document.getElementsByClassName("active");    
  var wrappedEl = angular.element(el);
  wrappedEl.css('color', $scope.backgroundColor)
  </code></pre>
  
  <p>This seems to work but whenever I go to different tab, active class is removed from but color remains the same? weird..</p>
  
  <p><strong>EDIT2</strong></p>
  
  <p>Oh wait that was dumb lol
  Solved it by adding style manually like suggested here</p>
  
  <p><a href="https://stackoverflow.com/questions/18918458/dynamically-change-a-css-class-properties-with-angularjs">Dynamically change a css class&#39; properties with AngularJS</a></p>