Angular: How to set IsActive on tab or any other bootstrap controlsive

One way of doing this would be by using ngClass directive and the $location service. In your template you could do:


where isActive would be a function in a scope defined like this:

myApp.controller('MyCtrl', function($scope, $location) {
    $scope.isActive = function(route) {
        return route === $location.path();

Here is the complete jsFiddle:

Repeating ng-class="{active:isActive('/dashboard')}" on each navigation tab might be tedious (if you’ve got many tabs) so this logic might be a candidate for a very simple directive.

Happy coding..:)