toggling class name based on route changes using angular-route - angularjs

Question

have 3 routes containing 3 forms Im trying to set bootstrap active class on current tab based on the current route in angular.I used angular route module. How can I achieve this. I m attaching the js code please check and help please
plnkr.co/edit/iTgNTJ74iLzlNx902qfP?p=preview

Answer 1

I used this.tab = 1 to default the tab where the class will be "active" first. Here's are my controller additions:
angular.module('ciwiseGenledgerApp')
.controller('MainCtrl', function () {
this.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
this.tab = 1;
this.selectTab = function(setTab) {
this.tab = setTab;
};
this.isSelected = function(checkTab){
return this.tab === checkTab;
};
});
I used ng-controller="MainCtrl as ctrl" in my page. Here's the snippet on the page.
<div class="collapse navbar-collapse" id="js-navbar-collapse" ng-controller="MainCtrl as ctrl">
<ul class="nav navbar-nav">
<li ng-class="{ active: ctrl.isSelected(1) }">Home</li>
<li ng-class="{ active: ctrl.isSelected(2) }"><a ng-href="#/reports" ng-click="ctrl.selectTab(2)">Reports</a></li>
<li ng-class="{ active: ctrl.isSelected(3) }"><a ng-href="#/admin" ng-click="ctrl.selectTab(3)">Admin</a></li>
<li ng-class="{ active: ctrl.isSelected(4) }"><a ng-href="#/help" ng-click="ctrl.selectTab(4)">Help</a></li>
<li ng-class="{ active: ctrl.isSelected(5) }"><a ng-href="#/about" ng-click="ctrl.selectTab(5)">About</a></li>
<li ng-class="{ active: ctrl.isSelected(6) }"><a ng-href="#/contact" ng-click="ctrl.selectTab(6)">Contact</a></li>
</ul>
</div>
My active tab code is independent of the view routing. Here's my app.js. It has the routing code for my views.
angular
.module('ciwiseGenledgerApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl',
controllerAs: 'about'
})
.when('/contact', {
templateUrl: 'views/contact.html',
controller: 'ContactCtrl',
controllerAs: 'contact'
})
.otherwise({
redirectTo: '/'
});
});
$.material.init();