title: Tabs in angularjs not working properly with UI-Router and UI-bootstrap
body: <p>I'm using a MEAN.js boilerplate, you can find the entire code <a href="https://github.com/meanjs/mean">here</a>.</p>
  
  <p>I tried to add 2 new tabs to the page rendered after one of the articles have been selected from the list. 
  For this task I decided to use both the UI-Router and UI-Bootstrap for Angular.js.
  The 2 tabs doesn't works properly, I can switch between them and correctly see their content, but occasionally when I go back and select the article list menu item, I get a blank page with the 2 tabs and nothing else.</p>
  
  <p>Here is the changes to the view-article.client.view.html file to include 2 new tabs (the previous content has been copied to the 2 files containing the partial for the new tabs ):</p>
  
  <pre><code> &lt;div ng-controller="ArticlesController"&gt;
     &lt;tabset&gt;
       &lt;tab
              ng-repeat="t in tabs"
              heading="{{t.heading}}"
              select="go(t.route)"
              active="t.active"&gt;
       &lt;/tab&gt;
     &lt;/tabset&gt;
    &lt;div ui-view&gt;&lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>I've inserted to the article controller these few lines of code: </p>
  
  <pre><code>$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);
         });
     });
  </code></pre>
  
  <p>Here's the route.js</p>
  
  <pre><code>'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'
      });
     }
  ]);
  </code></pre>