title: Angularjs : Dynamically created tab does not get active/selected
body: <p>I have the below angularjs code which creates tabs by pressing the new button. But the newly created tab does not get active or selected after creation. Always the one before the last one get active ! 
  Anyone knows what is wrong? </p>
  
  <p>plnkr : <a href="https://plnkr.co/edit/1329tgGonObRQ6Drk75A?p=preview" rel="nofollow">https://plnkr.co/edit/1329tgGonObRQ6Drk75A?p=preview</a></p>
  
  <p>HTML : </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html ng-app="plunker"&gt;
    &lt;head&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"&gt;&lt;/script&gt;
        &lt;script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.5.js"&gt;&lt;/script&gt;
      &lt;script src="example.js"&gt;&lt;/script&gt;
           &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"&gt;
  
  
  
    &lt;/head&gt;
    &lt;body&gt;
  
  &lt;div ng-controller="TabsParentController"&gt;
  
  
     &lt;script type="text/ng-template" id="myModalContent.html"&gt;
          &lt;div class="modal-header"&gt;
              &lt;h3 class="modal-title"&gt;I'm a modal!&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;ul&gt;
                 Sure to delete?
              &lt;/ul&gt;
              Selected: &lt;b&gt;{{ selected.item }}&lt;/b&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;button class="btn btn-primary" type="button" ng-click="ok()"&gt;OK&lt;/button&gt;
              &lt;button class="btn btn-warning" type="button" ng-click="cancel()"&gt;Cancel&lt;/button&gt;
          &lt;/div&gt;
      &lt;/script&gt;
  
  
      &lt;uib-tabset active="active"&gt;
  
          &lt;uib-tab ng-repeat="workspace in workspaces"
               heading="{{workspace.name}}"
               &gt;
              &lt;div ng-controller="TabsChildController"&gt;
                  &lt;div&gt;
                      {{$parent.workspace.id}} : {{ $parent.workspace.name}}
                  &lt;/div&gt;
                  &lt;input type="text" ng-model="workspace.name"/&gt;
                   &lt;button class="btn" type="button" ng-click="open('sm',workspace)"&gt;Delete&lt;/button&gt;
              &lt;/div&gt;     
          &lt;/uib-tab&gt;
        &lt;uib-tab index="0" select="addWorkspace()"&gt;
                &lt;uib-tab-heading&gt;
                  &lt;i class="glyphicon glyphicon-plus"&gt;&lt;/i&gt;
              &lt;/uib-tab-heading&gt;
          &lt;/uib-tab&gt;
      &lt;/uib-tabset&gt;
  &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Javascript :</p>
  
  <pre><code>var app = angular.module('plunker', ['ngAnimate','ui.bootstrap']);
  
  app.controller("TabsParentController", function ($scope,$uibModal) {
    $scope.animationsEnabled = true;
  
    $scope.open = function (size, workspace) {
  
      var modalInstance = $uibModal.open({
        animation: $scope.animationsEnabled,
        templateUrl: 'myModalContent.html',
        controller: 'ModalInstanceCtrl',
        size: size,
        resolve: {
  
           workspace: function () {
            return workspace;
          }
  
        }
      });
  
      modalInstance.result.then(function (selectedItem) {
         var index=$scope.workspaces.indexOf(selectedItem)
        $scope.workspaces.splice(index,1);     
      }, function () {
        $log.info('Modal dismissed at: ' + new Date());
      });
    };
  
  
  
      var setAllInactive = function() {
           //angular.forEach($scope.workspaces, function(workspace) {
             // workspace.active = false;
     // });
      };
      var addNewWorkspace = function() {
  
          var id = $scope.workspaces.length+1 ;
  
          $scope.workspaces.push({
              id: id,
  
              name: "Workspace " + id,
  
          });
          $scope.active=$scope.workspaces.length -1;
  
  
      };
  
      $scope.workspaces =
      [
  
      ];
  
      $scope.addWorkspace = function () {
          setAllInactive();
          addNewWorkspace();
  
      };    
  
  
       $scope.remove=function(item){ 
        var index=$scope.workspaces.indexOf(item)
        $scope.workspaces.splice(index,1);     
      }
  
  });
  
  angular.module('plunker').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, workspace) {
  
    $scope.selectedworkspace = workspace;
  
    $scope.ok = function () {
      $uibModalInstance.close( $scope.selectedworkspace );
    };
  
    $scope.cancel = function () {
      $uibModalInstance.dismiss('cancel');
    };
  });
  
  
  
  
  app.controller ("TabsChildController", function($scope, $log){
  
  });
  </code></pre>