title: how to add active class to menu in angularjs
body: <p>I want to add active class to menu bar when it is active. I tried below javascript code at my workplace but didn't work. here is the online link of <a href="http://plnkr.co/edit/ClBmOH3ljAWueRBdKGKR?p=preview" rel="nofollow">plunkr</a></p>
  
  <pre><code>&lt;!doctype html&gt;
  
      &lt;html ng-app="myApp"&gt;
        &lt;head&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"&gt;&lt;/script&gt;
        &lt;/head&gt;
        &lt;body&gt;
          &lt;script type="text/ng-template" id="pages/home.html"&gt;
            &lt;h1&gt;Home&lt;/h1&gt;
            &lt;h3&gt;{{message}}&lt;/h3&gt;
          &lt;/script&gt;
          &lt;script type="text/ng-template" id="pages/blog.html"&gt;
            &lt;h1&gt;Blog&lt;/h1&gt;
            &lt;h3&gt;{{message}}&lt;/h3&gt;
          &lt;/script&gt;
          &lt;script type="text/ng-template" id="pages/about.html"&gt;
            &lt;h1&gt;About&lt;/h1&gt;
            &lt;h3&gt;{{message}}&lt;/h3&gt;
          &lt;/script&gt;
  
          &lt;a href="#/"&gt;Home&lt;/a&gt;
          &lt;a href="#/blog"&gt;Blog&lt;/a&gt;
          &lt;a href="#/about"&gt;About&lt;/a&gt;
  
          &lt;div ng-view&gt;&lt;/div&gt;
  
          &lt;script src="app.js"&gt;&lt;/script&gt;
        &lt;/body&gt;
      &lt;/html&gt;
  
      javascript file
  
      var app = angular.module('myApp', ['ngRoute']);
  
      app.config(function($routeProvider) {
        $routeProvider
  
        .when('/', {
          templateUrl : 'pages/home.html',
          controller  : 'HomeController'
        })
  
        .when('/blog', {
          templateUrl : 'pages/blog.html',
          controller  : 'BlogController'
        })
  
        .when('/about', {
          templateUrl : 'pages/about.html',
          controller  : 'AboutController'
        })
  
        .otherwise({redirectTo: '/'});
      });
  
      app.controller('HomeController', function($scope) {
        $scope.message = 'Hello from HomeController';
      });
  
      app.controller('BlogController', function($scope) {
        $scope.message = 'Hello from BlogController';
      });
  
      app.controller('AboutController', function($scope) {
        $scope.message = 'Hello from AboutController';
      });
  </code></pre>