This section is from my controller:
mbpMod.controller("bookController", function($scope,api) {
...
$scope.bookTable=new BookTable();
$scope.bookLabel="Book";
...
}
On the HTML page, it functions properly with this code:
<md-tab>
<md-tab-label class="mbpPanel">Book</md-tab-label>
<md-tab-body>
<div flex ag-grid="bookTable.table" class="ag-mbp lowtable" ng-controller="bookController"></div>
</md-tab-body>
</md-tab>
However, it encounters issues when formatted like this:
<md-tab>
<div ng-controller="bookController">
<md-tab-label class="mbpPanel">{{bookLabel}}</md-tab-label>
<md-tab-body>
<div flex ag-grid="bookTable.table" class="ag-mbp lowtable" ></div>
</md-tab-body>
</div>
</md-tab>
Inserting the ng-controller directive in the md-tab tag causes a conflict due to duplicated directives.
Do you have any suggestions?