Clicking on angular ui tabs fires event many times

Question

I have 15 tabs using angular ui tabs like this

This is 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 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 on the Page. My problem is everytime i click on tab . In console.log i get 15 entries instead of one. Why is that

Answer 1

Remove the manual import from your entries.html and use ng-controller in the div that includes entries.html. Then, I think you will not need to use $scope.parent in the child controller, as 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 are executing the watch from each tab controller anyway also with my first change.

This way the controller will control all the child elements of the tabset and share the same $scope.

<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