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..:)


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s