Angularjs UI bootstrap dynamically select among static tabs not working

Question

I have three static tabs and a button that with ng-click="selectThirdTab()"

<div ng-controller="Ctrl">
        <input type="button" value="Select third tab" ng-click="selectThirdTab()" />
        <tabset justified="true">
            <tab heading="First" active="isFirstActive"></tab>
            <tab heading="Second" active="isSecondActive"></tab>
            <tab heading="Third" active="isThirdActive"></tab>
        </tabset>
</div>

function "selectThirdTab" is as follows:

$scope.selectThirdTab = function () {
    $scope.isThirdActive = true;
}

the plunker is here: Plunker

Initially the first tab is selected, you click on the button and the result is the the third button selected. Now if you select an other tab and then click on the button "Select third tab" again, then the third button does not get selected. What's wrong?

Answer 1

Or you can go that way:

angular.module('plunker', ['ui.bootstrap']);
var Ctrl = function ($scope, $timeout) {
    $scope.isActive = [{active:true},{active:false},{active:false}];
    $scope.selectThirdTab = function () {
          $scope.isActive[2].active = true;
    }
}

and in html

    <tabset justified="true">
        <tab heading="First" active="isActive[0].active"></tab>
        <tab heading="Second" active="isActive[1].active"></tab>
        <tab heading="Third" active="isActive[2].active"></tab>
    </tabset>

Answer 2

Only one tab may be active at a time:

$scope.selectThirdTab = function () {
    $scope.isThirdActive = true;
    $scope.isSecondActive=false;
    $scope.isFirstActive=false;
}

Answer 3

You just replace the following code

   $scope.selectThirdTab = function () {
      $scope.isThirdActive = true;
   }

by

$scope.selectThirdTab = function () {
   $scope.isFirstActive=false;
   $scope.isSecondActive=false;
   $scope.isThirdActive = true;
}

Hope it will help you.

I guess this example can help you. http://plnkr.co/edit/7XvmsjAZ1DrA0K4F6kiw?p=preview