how to set active class using ui-router when children state is active

Question

I have sidebar with some items in menu. this is the code of sidebar

<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
    <ul class="nav in" id="side-menu">
        <li ui-sref-active="sideActive">
            <md-button class="md-raised md-warn md-hue-2" ui-sref="dashboard.home"><i class="fa fa-dashboard fa-fw"></i> Dashboard</md-button>
        </li>
       <li ui-sref-active="sideActive">
            <md-button class="md-raised md-warn md-hue-2" ui-sref="dashboard.userManagement"><i class="fa fa-user"></i>  User </md-button>
        </li>
        <li  ui-sref-active-eq="sideActive" >
            <md-button ng-click="check(4)"  class="md-raised md-warn md-hue-2" ui-sref="dashboard.orderManagement.manage"><i class="fa fa-file-text-o"></i>  Order Management<span class="fa arrow"></span></md-button>
            <ul class="orderNav nav nav-second-level" collapse="collapseVar!=4">
                <li ng-class="{orderActive: $state.includes('order_management')}">
                    <md-button width="2" ui-sref="dashboard.orderManagement.manage" class="md-raised md-warn md-hue-2">Manage Orders</md-button>
                </li>
                <li  ng-class="{orderActive: $state.includes('order_management')}">
                    <md-button width="2" ui-sref="dashboard.orderManagement.payment.transfers" class="md-raised md-warn md-hue-2">Payment</md-button>
                </li>

            </ul>
        </li>
        <li ui-sref-active="sideActive">
            <md-button class="md-raised md-warn md-hue-2" ui-sref="dashboard.artManagement"><i class="fa fa-picture-o"></i>  Art Management</md-button>
        </li>

    </ul>
</div>
<!-- /.sidebar-collapse -->

in the above code, for the order management, there are sub menu items,and in that sub menu items, for one of the sub item, there are another sub items(which will show in main view rather than side bar). for example: say in 1)order management-->I) Payment II)Refund | i)transfers ii)revenue when view is in revenue or transfers or payment, the order management should be active.i am getting url http://localhost:8080/admin/#/dashboard/order_management/payment/transfer like this for transfer. but for those buttons i am not able set active class,when transfers is clicked.
this is one of the state code.

.state('dashboard.orderManagement.manage', {
            templateUrl: 'submodules/order_management/manageOrder.html',
            url: '/manage_order',
            controller: 'orderCtrl',
            resolve: {
                loadMyFiles: function($ocLazyLoad) {
                    return $ocLazyLoad.load({
                        name: 'abcd',
                        files: [
                            'submodules/order_management/controller.js',
                            'scripts/services.js'
                        ]
                    })
                }
            }
        })

How to do it , can anyone please help me

Answer 1

Using of filter to add class solved my issue.
Example:<li ng-class="{sideActive: ('dashboard.orderManagement' | includedByState)}" >

<ul class="nav in" id="side-menu">
            <li ui-sref-active="sideActive">
                <md-button class="md-raised md-warn md-hue-2" ui-sref="dashboard.home"><i class="fa fa-dashboard fa-fw"></i> Dashboard</md-button>
            </li>
           <li ui-sref-active="sideActive">
                <md-button class="md-raised md-warn md-hue-2" ui-sref="dashboard.userManagement"><i class="fa fa-user"></i>  User Management</md-button>
            </li>
            <li ng-class="{sideActive: ('dashboard.orderManagement' | includedByState)}" >
                <md-button ng-click="check(4)"  class="md-raised md-warn md-hue-2" ui-sref="dashboard.orderManagement.manage"><i class="fa fa-file-text-o"></i>  Order Management<span class="fa arrow"></span></md-button>
                <ul class="orderNav nav nav-second-level" collapse="collapseVar!=4">
                    <li ui-sref-active="orderActive">
                        <md-button width="2" ui-sref="dashboard.orderManagement.manage" class="md-raised md-warn md-hue-2">Manage Orders</md-button>
                    </li>
                    <li ng-class="{orderActive: ('dashboard.orderManagement.payment' | includedByState)}">
                        <md-button width="2" ui-sref="dashboard.orderManagement.payment.transfers" class="md-raised md-warn md-hue-2">Payment</md-button>
                    </li>

                </ul>
            </li>
            <li ui-sref-active="sideActive">
                <md-button class="md-raised md-warn md-hue-2" ui-sref="dashboard.artManagement"><i class="fa fa-picture-o"></i>  Art Management</md-button>
            </li>

        </ul>

Answer 2

You are giving wrong state in ng-class attribute of sub element of the list. Try using below code.

<div class="navbar-default sidebar" role="navigation">
        <div class="sidebar-nav navbar-collapse">
            <ul class="nav in" id="side-menu">
                <li ui-sref-active="sideActive">
                    <md-button class="md-raised md-warn md-hue-2" ui-sref="dashboard.home"><i class="fa fa-dashboard fa-fw"></i> Dashboard</md-button>
                </li>
               <li ui-sref-active="sideActive">
                    <md-button class="md-raised md-warn md-hue-2" ui-sref="dashboard.userManagement"><i class="fa fa-user"></i>  User </md-button>
                </li>
                <li  ng-class="{orderActive: $state.includes('dashboard.orderManagement')}" >
                    <md-button ng-click="check(4)"  class="md-raised md-warn md-hue-2" ui-sref="dashboard.orderManagement.manage"><i class="fa fa-file-text-o"></i>  Order Management<span class="fa arrow"></span></md-button>
                    <ul class="orderNav nav nav-second-level" collapse="collapseVar!=4">
                        <li ui-sref-active="sideActive">
                            <md-button width="2" ui-sref="dashboard.orderManagement.manage" class="md-raised md-warn md-hue-2">Manage Orders</md-button>
                        </li>
                        <li  ui-sref-active="sideActive">
                            <md-button width="2" ui-sref="dashboard.orderManagement.payment.transfers" class="md-raised md-warn md-hue-2">Payment</md-button>
                        </li>
                        <li ui-sref-active="sideActive">
                            <md-button width="2" ui-sref="dashboard.orderManagement.pixum" class="md-raised md-warn md-hue-2">Pixum</md-button>
                        </li>
                    </ul>
                </li>
                <li ui-sref-active="sideActive">
                    <md-button class="md-raised md-warn md-hue-2" ui-sref="dashboard.artManagement"><i class="fa fa-picture-o"></i>  Art Management</md-button>
                </li>

            </ul>
        </div>

Controller code:

 $stateProvider.state('dashboard.orderManagement', {
              url: '/order_management',
              abstract: true,
              template: '<div ui-view></div>'
            })
            .state('dashboard.orderManagement.manage', {
             templateUrl: 'submodules/order_management/manageOrder.html',
            url: '/manage_order',
            controller: 'orderCtrl',
            resolve: {
                loadMyFiles: function($ocLazyLoad) {
                    return $ocLazyLoad.load({
                        name: 'artifuAdmin',
                        files: [
                            'submodules/order_management/controller.js',
                            'scripts/services.js'
                        ]
                    })
                }
            }
            })
            .state('dashboard.orderManagement.pixum', {
               //content
            });