错误：使用uib-tab的[$ compile：multidir]

Question

My code is:

<uib-tabset>
  <uib-tab  id="tab1" heading="Tab1">
    <div ng-include="'partials/tab1.html'"></div>
  </uib-tab>
    <uib-tab  id="tab2" heading="Tab2" ng-controller="Tab2Controller">
    <div ng-include="'partials/tab2.html'"></div>
  </uib-tab>
    <uib-tab  id="tab3" heading="Tab3" ng-controller="Tab3Controller">
    <div ng-include="'partials/tab3.html'"></div>
  </uib-tab>
</uib-tabset>

and it worked fine until I updated AngularJS and AngularUI Boostrap and got:

Error: [$compile:multidir]

for each tab having its own controller (in my case Tab2 and Tab3).

Answer 1

A possible solution is to set the controller to the inner div instead of the ui-tab element:

<uib-tabset>
  <uib-tab  id="tab1" heading="Tab1">
    <div ng-include="'partials/tab1.html'"></div>
  </uib-tab>
  <uib-tab  id="tab2" heading="Tab2">
    <div ng-include="'partials/tab2.html'" ng-controller="Tab2Controller"></div>
  </uib-tab>
  <uib-tab  id="tab3" heading="Tab3">
    <div ng-include="'partials/tab3.html'" ng-controller="Tab3Controller"></div>
  </uib-tab>
</uib-tabset>