Активный класс не работает с помощью Angular.js UI-маршрутизатора

У меня есть одна проблема при использовании Angular.js ui-router Я добавил active класс для выделения меню, но его не работает. Я объясняю свой код ниже.

<ul class="nav navbar-nav">

           <li ui-sref-active="active" ><a ui-sref=".profile">College Profile</a></li>
<li ng-class="{active: $state.includes('dashboard.deptmanagement')}"><a ui-sref="dashboard.deptmanagement.stream" >Department Management</a></li>
<li  ui-sref-active="active">
            <li ui-sref-active="active"><a ui-sref="dashboard.user.usermanagement">User Management</a></li>
             <li ui-sref-active="active"><a ui-sref="dashboard.plan.contime">Plan Management</a></li>

          </ul> 

Моя проблема заключается в меню Department Management из вышеприведенного кода. Поскольку это меню имеет некоторые подменю, если я добавляю здесь ui-sref-active="active" проблема возникает, когда подменю выбирает это меню, не может получить никаких активных class. Подменю этого родительского меню приведено ниже.

deptmanagement.html:

    <div>
     <tabset>
    <tab ui-sref=".stream" ui-sref-active="active">
      <tab-heading>Add Stream</tab-heading>
    </tab>
    <tab ui-sref=".dept" ui-sref-active="active">
      <tab-heading>Add Department</tab-heading>
    </tab>
    <tab ui-sref=".course" ui-sref-active="active">
      <tab-heading>Add Course</tab-heading>
    </tab>
    <tab ui-sref=".sub" ui-sref-active="active">
      <tab-heading>Add Subject</tab-heading>
    </tab>
  </tabset>
  <div ui-view></div>
</div>

loginroute.js

var Admin=angular.module('Channabasavashwara',['ui.router', '720kb.datepicker','ngMessages','ngCapsLock','ui.bootstrap']);
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.deptmanagement', {
        url: '/deptmanagement',
        templateUrl: 'dashboardview/deptmanagement.html',
        controller: 'deptmanagementController'
    })
    .state('dashboard.deptmanagement.stream', {
        url: '/stream',
        templateUrl: 'dashboardview/stream.html',
        controller: 'streamController'
    })
    .state('dashboard.deptmanagement.course', {
        url: '/course',
        templateUrl: 'dashboardview/course.html',
        controller: 'resourcecourseController'
    })
    .state('dashboard.deptmanagement.sub', {
        url: '/subject',
        templateUrl: 'dashboardview/subject.html',
        controller: 'deptsubjectController'
    })
    .state('dashboard.deptmanagement.dept', {
        url: '/dept',
        templateUrl: 'dashboardview/dept.html',
        controller: 'deptController'
    })
})

Здесь мое требование - когда какое-либо из вышеуказанного подменю выберет главное меню, оставайтесь в центре внимания. Пожалуйста, помогите мне решить эту проблему.