title: Add class name dynamically using angular.js
body: <p>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.</p>
  
  <blockquote>
    <p>dashboard.html:</p>
  </blockquote>
  
  <pre><code>&lt;div id="navbar" class="navbar-collapse collapse"&gt;
            &lt;ul class="nav navbar-nav"&gt;
              &lt;li class={{home_active}} &gt;&lt;a ui-sref="dashboard"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li class={{profile_active}} &gt;&lt;a ui-sref=".profile" &gt;Profile&lt;/a&gt;&lt;/li&gt;
              &lt;li class={{dept_active}}&gt;&lt;a ui-sref=".dept"&gt;Department&lt;/a&gt;&lt;/li&gt;
              &lt;li class={{pricipal_active}}&gt;&lt;a ui-sref=".princpal"&gt;Princpal&lt;/a&gt;&lt;/li&gt;
              &lt;li class={{hod_active}}&gt;&lt;a ui-sref=".dept_head"&gt;Dept. Head&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
  
  &lt;!--main_heading_div--&gt;
          &lt;!--middle_content_details_data--&gt;
          &lt;div class="row" style="padding-top:120px;"  ui-view&gt;
  
          &lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p>loginRoute.js:</p>
  </blockquote>
  
  <pre><code>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'
      })
  </code></pre>
  
  <blockquote>
    <p>dashboardController.js:</p>
  </blockquote>
  
  <pre><code>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";
      }
  })
  </code></pre>
  
  <p>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.</p>