javascript - $scope.$watch is not working inside a tab -

i have tab few selected buttons embedded:

<tab id="graphtab" heading="graph">     <div class="analyze-select centered">             <br></br>             <h4>filter period:</h4>             from:             <select ng-model="startquarter" ng-options="quarter quarter in quarters"></select>             <select ng-model="startyear" ng-options="year year in years"></select>             to:             <select ng-model="endquarter" ng-options="quarter quarter in quarters"></select>             <select ng-model="endyear" ng-options="year year in years"></select>               <button class="btn btn-primary" type="submit" ng-click="filtertime()">filter</button>     </div> </tab> 

my controller instead looks following:

$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 same scheme works other select buttons have in view doesn't work embedded in tab. problem variables in scope not "watched" , angular not seem register change (that is, nothing printed on console when select different values in dropdown menu). depend on <tab> or missing else?

update: if move 3 selects outside <tab> element $watch works again. why <tab> element problem $watch?

i think reason doesn't work within tab because tab gets own scope. fix, can try using properties on object model. instance in controller:

$scope.mydata = {}; 

then html:

.... <select ng-model="mydata.startquarter" ng-options="quarter quarter in quarters"></select> .... 

and watch:

$scope.$watch('mydata.startyear', function () {     //your code here }); 

i believe should work mydata.startyear updated within tab directive (i assume using ui bootstrap angular).

what happens here mydata prototypically inherited parent scope (your controller) , can see same property (startyear) on object. when use primitive property directly on model, not work way expecting (but works way should). article scopes nice , explains in little more detail. type of pattern recommended in angular when using ng-model scenarios one.