angularjs中的选项卡与UI-Router和UI-bootstrap无法正常工作

我尝试在从列表中选择其中一篇文章后向页面添加2个新选项卡.
为此,我决定为Angular.js使用UI-Router和UI-Bootstrap.
2个选项卡无法正常工作,我可以在它们之间切换并正确查看其内容,但偶尔当我返回并选择文章列表菜单项时,我得到一个带有2个选项卡的空白页面,而不是其他任何内容.

以下是对view-article.client.view.html文件的更改,包括2个新选项卡(之前的内容已复制到包含新选项卡的部分的2个文件中)：

<div ng-controller="ArticlesController">
   <tabset>
     <tab
            ng-repeat="t in tabs"
            heading="{{t.heading}}"
            select="go(t.route)"
            active="t.active">
     </tab>
   </tabset>
  <div ui-view></div>
 </div>

我已经在文章控制器中插入了以下几行代码：

$scope.tabs = [
       { heading: 'SubA',route:'viewArticle.SubA',active:false },{ heading: 'SubB',route:'viewArticle.SubB',active:false }

   ];

   $scope.go = function(route){
       $state.go(route);
   };

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

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

这是route.js

'use strict'
angular.module('articles').config(['$stateProvider',function($stateProvider) {
    $stateProvider.
    state('listArticles',{
        url: '/articles',templateUrl: 'modules/articles/views/list-articles.client.view.html'
    }).
    state('createArticle',{
        url: '/articles/create',templateUrl: 'modules/articles/views/create-article.client.view.html'
    }).
    state('viewArticle',{
        url: '/articles/:articleId',templateUrl: 'modules/articles/views/view-article.client.view.html'
    }).
    state('editArticle',{
        url: '/articles/:articleId/edit',templateUrl: 'modules/articles/views/edit-article.client.view.html'
    }).
    state('viewArticle.SubA',{
        url: '/SubA',templateUrl: 'modules/articles/views/view-article.client.view.SubA.html'
    }).

    state('viewArticle.SubB',{
        url: '/SubB',templateUrl: 'modules/articles/views/view-article.client.view.SubB.html'
    });
   }
]);