How to set bootstrap navbar active class with Angular JS?

Question

If I have a navbar in bootstrap with the items

Home | About | Contact 

How do I set the active class for each menu item when they are active? That is, how can I set class="active" when the angular route is at

1. #/ for home
2. #/about for the about page
3. #/contact for the contact page

Answer 1

A very elegant way is to use ng-controller to run a single controller outside of the ng-view:

<div class="collapse navbar-collapse" ng-controller="HeaderController">     <ul class="nav navbar-nav">         <li ng-class="{ active: isActive('/')}"><a href="/">Home</a></li>         <li ng-class="{ active: isActive('/dogs')}"><a href="/dogs">Dogs</a></li>         <li ng-class="{ active: isActive('/cats')}"><a href="/cats">Cats</a></li>     </ul> </div> <div ng-view></div> 

and include in controllers.js:

function HeaderController($scope, $location)  {      $scope.isActive = function (viewLocation) {          return viewLocation === $location.path();     }; } 

Answer 2

I just wrote a directive to handle this, so you can simply add the attribute bs-active-link to the parent <ul> element, and any time the route changed, it will find the matching link, and add the active class to the corresponding <li>.

You can see it in action here: http://jsfiddle.net/8mcedv3b/

Example HTML:

<ul class="nav navbar-nav" bs-active-link>   <li><a href="/home">Home</a></li>   <li><a href="/contact">Contact</a></li> </ul> 

Javascript:

angular.module('appName') .directive('bsActiveLink', ['$location', function ($location) { return {     restrict: 'A', //use as attribute      replace: false,     link: function (scope, elem) {         //after the route has changed         scope.$on("$routeChangeSuccess", function () {             var hrefs = ['/#' + $location.path(),                          '#' + $location.path(), //html5: false                          $location.path()]; //html5: true             angular.forEach(elem.find('a'), function (a) {                 a = angular.element(a);                 if (-1 !== hrefs.indexOf(a.attr('href'))) {                     a.parent().addClass('active');                 } else {                     a.parent().removeClass('active');                    };             });              });     } } }]);