Angularjs UI installer dynamically selects 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> 

The "selectThirdTab" function is as follows:

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

plunker is here: Plunker

First, the first tab is selected, you press the button, and the result is selected by the third button. Now, if you select a different tab, and then click the "Select Third Tab" button again, the third button will not be selected. What's wrong?

Answer 1

Or you can go as follows:

 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 can 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 this helps you.

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