Bootstrap nested tab state problem take II

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>
<body>
<div ng-controller="TabsDemoCtrl">
  <p>Scope: {{$id}}</p>
  <ul tabset>
    <li tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled" select="selectTab(tab)">
      <div class="tab-content" ng-view>
      </div>
    </li>
  </ul>
</div>
</body>
</html>

var app = angular.module('plunker', ['ui.bootstrap'])
.config(function($routeProvider) {
  $routeProvider.when("/Secondary/", {
    templateUrl: 'secondary.html'
  });
  $routeProvider.otherwise({
    templateUrl: 'main.html'
  });
});

app.factory("StateMachine", function () {
  var service = 
  {
    tabs : [
      { title:"Tab 1", active: false, subtab: null, url: "/" }],
    subtabs : [
      { title:"Subtab 1", content:"Content 1", active: false },
      { title:"Subtab 2", content:"Content 2", active: false }],
    getCurrentTab: function() {
      for (var i = 0; i < this.tabs.length; i++)
      {
        var tab = this.tabs[i];
        if (tab.active) {
          return tab;
        }
      }
    },
    addTab : function(){
      var title = "New Tab " + this.tabs.length;
      this.tabs.push({ title : title, active: true, subtab: null, url: "/Secondary/"  });
    }
  };
  return service;
});

var TabsDemoCtrl = function ($scope, $location, StateMachine) {
  $scope.tabs = StateMachine.tabs;
  $scope.subtabs = StateMachine.subtabs;
  $scope.addTab = function() {
    StateMachine.addTab();
    $location.path("/Secondary/");
  };
  
  $scope.selectTab = function(tab) {
    $location.path(tab.url);
  };
  
  $scope.selectSub = function(sub) {
    var tab = StateMachine.getCurrentTab();
    tab.subtab = sub.title;
    alert(sub.title + " activated (Scope: " + $scope.$id + ")");
  };

};

var SecondaryCtrl = function($scope){
}

<p>You are on: {{tab.title}}</p>
<p>Scope: {{$id}}</p>
<p>Subtab: {{tab.subtab}}</p>
<pre>{{subtabs}}</pre>
<button ng-click="addTab()">Add Tab</button>
<ul tabset>
  <li tab ng-repeat="sub in subtabs" heading="{{sub.title}}" active="sub.active" disabled="sub.disabled" select="selectSub(sub)">
    <p>{{sub.content}}</p>
    <p>Scope: {{$id}}</p>
  </li>
</ul>

<div ng-controller="SecondaryCtrl">
  <p>You are on: {{tab.title}}</p>
  <p>Scope: {{$id}}</p>
</div>