Angular.js, router-ui and Bootstrap: Activate State of Clicked Button - angularjs

Question

I have this nav.html:
<ul class="nav nav-pills pull-right">
<li ng-class="{ active: $state.includes('home') }"><a ui-sref="home">Home</a></li>
<li ng-class="{ active: $state.includes('about') }"><a ui-sref="about">About</a></li>
<li ng-class="{ active: $state.includes('contact') }"><a ui-sref="contact">Contact</a></li>
</ul>
<h3 class="text-muted">my page title</h3>
</div
This Controller:
.module('app', [
'ui.router'
])
.config(['$urlRouterProvider','$stateProvider', function($urlRouterProvider,$stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('about', {
url: '/about',
templateUrl: 'templates/about.html',
controller: 'aboutCtrl'
})
// and so forth
Now when I click a button in the navigation, the ui-router correctly displays tha page and changes the url in the browser adress bar. However Bootstrap does not make the button activated, aka selected or color it grey etc. How to achieve this the angular way?

Answer 1

You must make sure that $state service is defined/injected in your current scope. You may have a navCtrl that handles the rendering logic of your navbar html. Remember to inject that controller in your nav.html:
<ul ng-controller = "navCtrl" class="nav nav-pills pull-right">
Next, write a boolean function inside your navCtrl to check the current state, using $state.includes:
.controller('navCtrl',['$scope','$state','$location',function($scope,$state,$location){
$scope.isState = function(states){
return $state.includes(states);
};
}])
and lastly use this function in your html:
<li ng-class="{active: isState('home') }">
<a ui-sref="home">Home</a>
</li>
Here is the working plnkr.