如何应用多条件角度ui-tab添加活动类？

Question

我正在尝试使用angular.js中的menu and sub-menu显示ui.bootstrap，但在选择子菜单时，相应的父菜单未获得活动类。

dashboard.html：

<li ng-class="{'active open': $state.includes('dashboard.settings.area')}"><a ui-sref="dashboard.settings.area.manageState">Settings</a></li>

这是我的顶级父菜单意味着点击设置父菜单时，sub-menu下方会打开。

settings.html：

<div>
<uib-tabset> 

<uib-tab ui-sref="dashboard.settings.area" active="set[1]"> 
<uib-tab-heading>Manage Area</uib-tab-heading>
</uib-tab> 

</uib-tabset> 
<div ui-view></div>
</div>

settingscontroller.js：

var dept=angular.module('easyride');
dept.controller('settingsController',function($scope,$state){
    $scope.set = {
    1: ($state.current.name === 'dashboard.settings.area')
    };
});

然后在此sub-menu下，还有两个sub-sub-menu出现在下面。

area.html：

<div>
<uib-tabset> 

<uib-tab ui-sref="dashboard.settings.area.manageState" active="area[1]"> 
<uib-tab-heading>Manage State</uib-tab-heading> 
</uib-tab> 

<uib-tab ui-sref="dashboard.settings.area.manageCity" active="area[2]"> 
<uib-tab-heading>Manage City</uib-tab-heading> 
</uib-tab>

</uib-tabset> 
<div ui-view></div>
</div>

areacontroller.js：

var dept=angular.module('easyride');
dept.controller('areaController',function($scope,$state){
    $scope.area = {
    1: ($state.current.name === 'dashboard.settings.area.manageState'),
    2: ($state.current.name === 'dashboard.settings.area.manageCity')
    };
});

当用户点击settings parent menu时，它会打开sub-menu->Manage Area，在此子菜单下，sub-sub-menu->Manage State将会打开，整个链将保持有效状态。方法settings,Manage Area,Manage State三个选项卡将保持活动状态但在我的情况下只有Manage State仍处于活动状态，但其父菜单未突出显示，因此我需要将多个条件放在uib-tab活动类中。