如何使用angular ui-router根据状态使导航栏选项卡处于活动状态或已访问状态？

我想根据当前状态使选项卡处于活动状态，当用户切换选项卡时，只有已访问过的或当前活动的选项卡应该突出显示，是否可以使用ui-router实现这一点？\nmain.html\n

\napp.js\n

angular.module('App', [
        'ui.router'
    ]).config(function($stateProvider, $httpProvider, $urlRouterProvider) {
            'use strict'
            $urlRouterProvider.otherwise(function($injector) {
                var $state = $injector.get('$state');
                $state.go('app.dit');
            });
            $stateProvider
                .state('app', {
                    abstract: true,
                    url: '',
                    templateUrl: 'web/global/main.html',
                    controller: 'MainCtrl'
                })
                .state('app.dit', {
                    url: '/dit',
                    templateUrl: 'view/partials/dit.html',
                    controller: 'DitCtrl'
                })
                .state('app.st', {
                    url: '/st',
                    templateUrl: 'view/partials/st.html',
                    controller: 'StCtrl'
                })
                .state('app.uat', {
                    url: '/uat',
                    templateUrl: 'view/partials/uat.html',
                    controller: 'UatCtrl'
                })
                .state('app.prod', {
                    url: '/prod',
                    templateUrl: 'view/partials/prod.html',
                    controller: 'ProdCtrl',
                });