angular-ui tabs loading template in tab-content

angular-ui, angularjs

Solution

Just add the ng-include as a child of the pane

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

The reason this works is that the scope variable pane is not yet available when you use the ng-include in the same element as the ng-repeat that creates the pane variable.

This is because the priority value of the ng-include is 0(the default) while the priority of the ng-repeat is 1000 and so the order of execution is:

- ng-include

- ng-repeat

See the directive docs

Problem

I'm using the tabs in angular-ui using this controller: ``` $scope.panes = [ { title:"Home", content:"home" , active: true}, { title:"Settings", content:"settings"}, { title:"View", content:"view"} ]; ``` and this in the html file: ``` <tabs> <pane active="pane.active" heading="{{pane.title}}" ng-repeat="pane in panes" > {{pane.content}} </pane> </tabs> ``` but i want to set the content as a template how can I do that, I tried setting the ng-include code in this plunker, but didn't work. Thanks in advance. update: if you find this solution and you'r not using angular-bootstrap v0.12 you need to update the code to the new syntax of v0.13 like this: ``` <tabset> <tab active="pane.active" heading="{{pane.title}}" ng-repeat="pane in panes" > <div ng-include="pane.content"></div> </tab> </tabset> ``` I already updated the plunker to have the syntax of the angular-bootstrap v0.13.

Original source