Javascript 角度、UI路由器、嵌套导航和选项卡问题

我正在尝试使用Angular、ui路由器和选项卡构建一个导航系统。我几乎让它工作，但我有一些奇怪的行为

在顶部有一个导航条形式的顶级导航。路由默认为“仪表板”。与“仪表板”相同的“级别”是“记录”。在“录音”中，有一个标签形式的辅助导航。一个选项卡是搜索表单，另一个是结果集。提交表单时，应切换到“结果”选项卡。单击选项卡本身应将您带到相应的视图。单击顶级导航（仪表板、日志）也会将您带到正确的状态

问题包括：

• 选项卡的活动状态仅在单击选项卡两次后适用。最初它应用于活动
• 与顶级导航不一致的行为。有时也需要两次单击

这是我的装备的一个精简版。

路由

$urlRouterProvider.otherwise('/dashboard');

$stateProvider
  .state('dashboard', {
    url: '/dashboard',
    views: {
      'main': {
        controller: 'DashboardCtrl',
        templateUrl: 'dashboard.tpl.html'
      }
    }
  })
  .state('recordings', {
    url: '/recordings',
    views: {
      'main': {
        controller: 'RecordingsCtrl',
        templateUrl: 'recordings.tpl.html'
      }
    }
  })
  .state('recordings.search', {
    abstract: true,
    url: '/search',
    views: {
      'recordings': {
        controller: 'SearchCtrl',
        templateUrl: 'search.tpl.html'
      },
      '': {
        templateUrl: 'searchContent.tpl.html'
      }
    }
  })
  .state('recordings.search.form', {
    url: '/form',
    controller: 'SearchCtrl',
    templateUrl: 'form.tpl.html'
  })
  .state('recordings.search.results', {
    url: '/results',
    controller: 'ResultsCtrl',
    templateUrl: 'results.tpl.html'
  });

制表符代码

$scope.tabs = [
  {
    heading: 'Search',
    state: 'recordings.search.form',
    active: false
  },
  {
    heading: 'Results',
    state: 'recordings.search.results',
    active: false
  }
];
$scope.go = function(route){
    $state.go(route);
};

$scope.active = function(route){
    return $state.is(route);
};

$scope.$on("$stateChangeSuccess", function() {
    console.log('yay');
    $scope.tabs.forEach(function(tab) {
        tab.active = $scope.active(tab.route);
    });
});

选项卡视图

<tabset>
  <tab
    ng-repeat="t in tabs"
    heading="{{t.heading}}"
    ng-click="$state.go(t.state)"
    active="t.active">
  </tab>
</tabset>

---

您是如何解决这些问题的？