angularjs - angular-ui tabs loading template in tab-content -

angularjs - angular-ui tabs loading template in tab-content -

i'm using tabs in angular-ui using controller:

$scope.panes = [ { title:"home", content:"home" , active: true}, { title:"settings", content:"settings"}, { title:"view", content:"view"} ];

and in html file:

<tabs> <pane active="pane.active" heading="{{pane.title}}" ng-repeat="pane in panes" > {{pane.content}} </pane> </tabs>

but want set content template how can that, tried setting ng-include code in plunker, didn't work. in advance.

update:

if find solution , you'r not using angular-bootstrap v0.12 need update code the new syntax of v0.13 this:

<tabset> <tab active="pane.active" heading="{{pane.title}}" ng-repeat="pane in panes" > <div ng-include="pane.content"></div> </tab> </tabset>

i updated plunker have syntax of angular-bootstrap v0.13.

just add together ng-include kid of pane

<tabs> <pane active="pane.active" heading="{{pane.title}}" ng-repeat="pane in panes"> <div ng-include="pane.content"></div> </pane> </tabs>

the reason works scope variable pane not yet available when utilize ng-include in same element ng-repeat creates pane variable.

this because priority value of ng-include 0(the default) while priority of ng-repeat 1000 , order of execution is:

ng-include ng-repeat

see directive docs

angularjs angular-ui