How to set active angularjs bootstrap tab with static content

Question

I am using the Angular Bootstrap user interface to show a tab with static content. The boot script I include is ui-bootstrap-tpls-0.6.0.min.js.

here is my markup:

<tabset> <tab ng-show="$parent.hideme" ng-class="{active:$parent.hideme}"> <tab-heading> tab1 </tab-heading> <div> tab content 1 </div> </tab> <tab ng-hide="$parent.hideme" ng-class="{active:!$parent.hideme}"> <tab-heading> tab2 </tab-heading> <div> tab content 2 </div> </tab> </tabset> 

Here is the controller

 function myController($scope) { $scope.hideme = false; }); 

If I don't have the ng class applied on the tab, it works well, except when the first tab is hidden and the second tab is displayed ($ scope.hideme = false), the contents of the first tab will show avtive.

If I added an ng class, this caused an error in angularjs. Error: [$ parse: syntax] http://errors.angularjs.org/undefined/ $ parse / syntax? P0 =% 7B & p1 = is% 20an% 20unexpected% 20token & p2 = 16 & p3 =% 7Bactive% 3Afalse% 7D% 20% 7Bactive% 3A% 20active% 2C% 20disabled% 3A% 20disabled% 7D & p4 =% 7Bactive % 3A% 20active% 2C% 20disabled% 3A% 20disabled% 7D

What is the correct way (or the correct syntax) to activate a specific tab?

Answer 1

I recommend not trying to do show / hide logic. I was also upset about this because the UT Bootstrap Tab Documentation only shows navigation to the tabs created by the ng-repeat binding.

But I believe that you can refer to tabs in the tabset directive as $ parentScope.tabs. Thus, simple navigation is possible with $parent.tabs[2].select() :

 <tabset> <tab heading="Tab 1"> <button class="btn btn-success" ng-click="$parent.tabs[2].select()">Go to Tab 3</button> </tab> <tab heading="Tab 2"> <p>Tab 2 contents</p> </tab> <tab heading="Tab 3"> <button class="btn btn-danger" ng-click="$parent.tabs[0].select()">Back to Tab 1</button> </tab> </tabset> 

I have a working Plunker example if this helps.