Angular ui-bootstrap with ng-repeat: if there's no tabs, new tab isn't selected

Question

Here's the link to demonstrate my problem: http://codepen.io/pietrofxq/pen/ZLLJdr?editors=1010

Click in "remove tabs" and then in "add tab"

The issue: I do a loop with ng-repeat to display tabs. But there may be a time when there's no items in the array, and when I add one tab back, I'd like this tab to come already selected, because it's the only one in the tabs array. The behavior now is that I have to click in the tab to angular to know that that tab is selected. How can I make this tab selected when I add it in the array?

Answer 1

Found a dirty hack to make it work.

I have more than one tab, so I need to keep track of each one:

$scope.tabs = {
  tabOne: 0,
  tabTwo: 0
}

<uib-tabset active="tabs.tabOne"></uib-tabset>
<uib-tabset active="tabs.tabTwo"></uib-tabset>

When the array is empty and I add one more tab, I have to reset the value inside a $timeout call:

$scope.$watch("items", function() {
 $timeout(function() {
    for (var prop in $scope.tabs)
      $scope.tabs[prop] = 0 
  })
}