bug(tabs): Cannot set the initial selected tab in a tabset

[cambell-prince]

I don't seem to be able to set the inital tab in an angular bootstrap tabset. It always sets the left most tab to active.

Given the html:

<tabset>
    <tab heading="Static 1" active="data.static1">Static content</tab>
    <tab heading="Static 2" active="data.static2">Static content</tab>
</tabset>

and js:

angular.module('plunker', ['ui.bootstrap']);
var TabsDemoCtrl = function ($scope) {
  $scope.data = {static1: false, static2: true}
};

See the Plunker

[pkozlowski-opensource]

@ajoslin I thought it was fixed in master but doesn't seem so:
http://plnkr.co/edit/OXYfgL?p=preview

[tmaiaroto]

Somewhat-related: I've also noticed that if you were to disable a tab and then have a button that enables it AND sets it active via some function within $scope...You need to click twice. It will enable it, but won't set it active for some reason...Async reason? I tried setting a timeout, didn't matter. Also worth mentioning, you can set the tab active just fine if it wasn't disabled. It's just that you can't seem to do both at once. If you were to basically take the demo and add a fourth button to enable and set active, it likely wouldn't work.

[ernestoalejo]

It's me or this issue shouldn't have been closed yet? The Plunker still shows the error, and some logging in the code shows that the

scope.$watch('active', function(active) {

of the first tab fires before the other ones. As it was the first one added, it decided unilaterally it has to be active; and deactivates all the other ones (including the requested one).

[hallister]

I'm assuming that's because that plunker is still loading in the old version. Here's a current plunker based on the current release that shows the second tab is selected: http://plnkr.co/edit/2C2JL60WSzmPp8kGyTZP. So appears to be working.

[ernestoalejo]

@hall5714 It's strange, but you're correct. Sorry for the noise.

[JoaoPeixoto]

This is still a bug.

If the first static tab has an 'active' attribute, it will always be selected, regardless of the expression.

http://plnkr.co/edit/73lm068buZf851h47FVQ

[paul-hammant]

Still a bug with 0.6.0 too - just modify the version in http://plnkr.co/edit/73lm068buZf851h47FVQ to see that.

[ajoslin]

It is fixed on master though, you'll see if we load in the latest build from the ci server: http://plnkr.co/edit/uOASvZ71DzgZqODmHQP8?p=preview

[liberalGeorge]

I'm experiencing an issue with this using UI 0.6 and Angular 1.0.8. The active tab does not display it's content on first load, nor does it show content after selecting another tab and returning to the tab that was originally labelled as active. See http://plnkr.co/edit/jGeG9ZCgTWCmGhSqF9kr?p=preview

[tkalfigo]

Still getting the same issue. Using ui-bootstrap 0.9.0. and getting same error in console as the plunkr by liberalGeorge: "TypeError: undefined is not a function".

Anyone resolved this?

[john-mcpeek]

A am still getting this with ui-bootstrap-tpls-0.10.0.js. Debugging it relieved that I had used active="true" and the way it is set in the code requires a variable or a string. I got it working with single quotes inside the double quotes active="'true'". It seems that this should be easier.

[Foxandxss]

@john-mcpeek that is fixed for the next version.

[jsbdr47a]

Bug "active attribute of tab element not working correctly #678" -
was fixed just for objects, for arrays it doesn't still work:

Given the html:

  <tabset>
        <tab heading="Static 1" active="tabs[0].active" >Static content</tab>
        <tab heading="Static 2" active="tabs[1].active">Static content</tab>
   </tabset>

and js:

angular.module('plunker', ['ui.bootstrap']);
var TabsDemoCtrl = function ($scope) { 
  $scope.tabs = [{active: false}, {active: true}] 
}; 

See the Plunker (active tab isn't second one)