Add class name dynamically using angular.js

Question

i need to add class name dynamically inside controller page when state will change using angular js.I did some coding but its working only after page refresh.I am explaining my code below.

dashboard.html:

<div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class={{home_active}} ><a ui-sref="dashboard">Home</a></li>
            <li class={{profile_active}} ><a ui-sref=".profile" >Profile</a></li>
            <li class={{dept_active}}><a ui-sref=".dept">Department</a></li>
            <li class={{pricipal_active}}><a ui-sref=".princpal">Princpal</a></li>
            <li class={{hod_active}}><a ui-sref=".dept_head">Dept. Head</a></li>
          </ul>
          </div><!--/.nav-collapse -->
      </div>
    </nav>

<!--main_heading_div-->
        <!--middle_content_details_data-->
        <div class="row" style="padding-top:120px;"  ui-view>

        </div>

loginRoute.js:

var Admin=angular.module('Channabasavashwara',['ui.router']);
Admin.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
     .state('/', {
            url: '/',
            templateUrl: 'dashboardview/login.html',
            controller: 'loginController'
        })
        .state('dashboard', {
            url: '/dashboard',
            templateUrl: 'dashboardview/dashboard.html',
            controller: 'dashboardController'
        })
        .state('dashboard.profile', {
        url: '/profile',
        templateUrl: 'dashboardview/profile.html',
        controller: 'profileController'
    })
    .state('dashboard.dept', {
        url: '/dept',
        templateUrl: 'dashboardview/dept.html',
        controller: 'deptController'
    })
    .state('dashboard.princpal', {
        url: '/princpal',
        templateUrl: 'dashboardview/princpal.html',
        controller: 'princpalController'
    })
    .state('dashboard.dept_head', {
        url: '/dept_head',
        templateUrl: 'dashboardview/depthead.html',
        controller: 'deptheadController'
    })
    .state('home',{
        url: '/home',
        templateUrl: 'homeview/home.html',
        controller: 'homeController'
    })
    .state('home.course', {
        url: '/course',
        templateUrl: 'homeview/course.html',
        controller: 'coursecontroller'
    })
    .state('home.subject', {
        url: '/subject',
        templateUrl: 'homeview/subject.html',
        controller: 'subjectcontroller'
    })

dashboardController.js:

var dashboard=angular.module('Channabasavashwara');
dashboard.controller('dashboardController',function($scope,$http,$state){
    //$state.current='';
    if($state.current.url=="/dashboard"){
        $scope.profile_active="";
        $scope.home_active="active";
        $scope.dept_active="";
        $scope.pricipal_active="";
        $scope.hod_active="";
    }
    else if($state.current.url=="/profile"){
        $scope.profile_active="active";
        $scope.home_active="";
        $scope.dept_active="";
        $scope.pricipal_active="";
        $scope.hod_active="";
    }
    else if($state.current.url=="/dept"){
        $scope.profile_active="";
        $scope.home_active="";
        $scope.dept_active="active";
        $scope.pricipal_active="";
        $scope.hod_active="";
    }
    else if($state.current.url=="/princpal"){
        $scope.profile_active="";
        $scope.home_active="";
        $scope.dept_active="";
        $scope.pricipal_active="active";
        $scope.hod_active="";
    }
    else{
        $scope.profile_active="";
        $scope.home_active="";
        $scope.dept_active="";
        $scope.pricipal_active="";
        $scope.hod_active="active";
    }
})

Here i am getting the class name but only after page reloading.I need when user will change the state according to that state the class name will add.Please help me.

Answer 1

It looks like you're using angular-ui-router. They have a build in directive called ui-sref-active. It adds a class to an element if the related ui-sref is active.

In your case you don't need all the code in your dashboardController.js. Just change your dashboard.html and add the ui-sref-active directive to the li elements:

dashboard.html:

<ul class="nav navbar-nav">
  <li ui-sref-active="active" ><a ui-sref="dashboard">Home</a></li>
  <li ui-sref-active="active" ><a ui-sref=".profile" >Profile</a></li>
  <li ui-sref-active="active"><a ui-sref=".dept">Department</a></li>
  <li ui-sref-active="active"><a ui-sref=".princpal">Princpal</a></li>
  <li ui-sref-active="active"><a ui-sref=".dept_head">Dept. Head</a></li>
</ul>