$ scope. $ watch does not work inside a tab
I have a tab with a few built-in buttons:
<tab id="graphTab" heading="Graph">
<div class="analyze-select centered">
<br></br>
<h4>Filter by period:</h4>
From:
<select ng-model="startQuarter" ng-options="quarter for quarter in quarters"></select>
<select ng-model="startYear" ng-options="year for year in years"></select>
To:
<select ng-model="endQuarter" ng-options="quarter for quarter in quarters"></select>
<select ng-model="endYear" ng-options="year for year in years"></select>
<button class="btn btn-primary" type="submit" ng-click="filterTime()">Filter</button>
</div>
</tab>
My controller is as follows:
$scope.startYear ='';
$scope.startQuarter = '';
$scope.endYear = '';
$scope.endQuarter = '';
$scope.$watch('startYear',function(){
console.log('startYear has changed!');
});
$scope.$watch('endYear',function(){
console.log('endYear has changed!');
});
$scope.$watch('startQuarter',function(){
console.log('startQuarter has changed!');
});
$scope.$watch('endQuarter',function(){
console.log('endQuarter has changed!');
});
Now, although the same scheme works for other buttons select, I have, in my opinion, it does not work for built-in tabs. The problem is that these variables are not observed in the area, and angular does not seem to register any changes (i.e. nothing is printed on the console when I select different values from the drop-down menu). Does it depend on <tab>, or am I missing something else?
UPDATE: Therefore, if I move three selectout <tab>, the item $watchworks again. Why does the item <tab>present a problem for $watch?
+4