Clicking on angular ui tabs triggers a multiple event

Question

I have 15 tabs using angular ui tabs like this

This is a template.

<tabset justified="true"> <tab heading="{{ tab.display }}" select="tsc.selectTab(tab.date)" ng-repeat="tab in tsc.tabs"> <div ng-include="'entries.html'"></div> </tab> </tabset> 

This is the controller

 $scope.activeTabDate = ''; self.selectTab = function (tabDate) { $scope.activeTabDate = tabDate; }; 

Now this is my child controller for entries.html

 $scope.$parent.$watch('activeTabDate', function (newValue, oldValue) { if (newValue !== oldValue) { console.log('--'+newValue); } }); 

I have 15 tabs per page. My problem every time I click on a tab. In console.log, I get 15 entries instead of one. Why is this

Answer 1

Remove manual import from your .html entries and use ng-controller in a div that includes entries.html. Then, I think, you will not need to use $ scope.parent in the child controller, since the scope will be the same as the main one.

 <tabset justified="true"> <tab heading="{{ tab.display }}" select="tsc.selectTab(tab.date)" ng-repeat="tab in tsc.tabs"> <div ng-include="'entries.html'" ng-controller="yourchildcontroller"></div> </tab> </tabset> $scope.$watch('activeTabDate', function (newValue, oldValue) { if (newValue !== oldValue) { console.log('--'+newValue); } }); 

EDIT You also run hours from each tab controller, also with my first change.

Thus, the controller will manage all the child tabs and use the same $ region.

 <tabset justified="true" ng-controller="yourchildcontroller"> <tab heading="{{ tab.display }}" select="tsc.selectTab(tab.date)" ng-repeat="tab in tsc.tabs"> <div ng-include="'entries.html'" ></div> </tab> </tabset> $scope.$watch('activeTabDate', function (newValue, oldValue) { if (newValue !== oldValue) { console.log('--'+newValue); } }); 

https://docs.angularjs.org/api/ng/directive/ngController