Angular -ui вкладки загрузки шаблона в tab-content

Я использую вкладки в angular -ui с помощью этого контроллера:

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

и это в файле html:

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

но я хочу установить контент как шаблон, как я могу это сделать, я попытался установить код ng-include в этом plunker, но не работал.
Спасибо заранее.

обновление:

если вы найдете это решение, и вы не используете angular -bootstrap v0.12, вам нужно обновить код до нового синтаксиса v0.13 например:

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

Я уже обновил plunker, чтобы иметь синтаксис angular -bootstrap v0.13.

Ответ 1

Просто добавьте ng-include в качестве дочернего элемента панели

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

Причина этого в том, что область переменных области видимости пока недоступна, если вы используете ng-include в том же элементе, что и ng-repeat, который создает переменной панели.

Это связано с тем, что значение приоритета ng-include равно 0 (по умолчанию), а приоритет ng-repeat - 1000, поэтому порядок выполнения:

  • нг-включить
  • нг-повтор

См. директивные документы