Angular Bootstrap - tab is active by default (dynamic tab)

Question

I have problem with Bootstrap Angularjs tabs. I want the dynamic tab to be active by default, but it seems like I cannot if I have a static tab inside the same tab.

<tabset ng-init="tab.active = true"> <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active"> {{tab.content}} </tab> <tab heading="Static"> Static </tab> </tabset> 

`

Here is an explanation:

http://plnkr.co/edit/DfM6r4tznE9b0K8LqvF0?p=preview

I want Dynamic Heading 1 to be selected by default. Is this possible with an active directive or do I need to create a function that will handle the active state?

Answer 1

Try it.

 <tabset> <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" ng-init="tab.active = $index === 0"> {{tab.content}} </tab> <tab heading="Static"> Static </tab> </tabset> 

Working plnkr