angular-ui tabs loading template in tab-content

Question

I\'m using the tabs in angular-ui using this controller:

$scope.panes = [
    { title:"Home",      content:"home" , active: true},
    { title         


        

Answer 1

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:

1. ng-include
2. ng-repeat

See the directive docs