Angular $watch doesn't work properly with state provider

Question

I would like to observe the inputs in each view in the stateProvider. I prepared Plunker, which shows what the problem is. Plunker

I use $watch like this:

  $scope.$watch('Group', function(newValues, oldValues) {
      console.log(newValues);
 }, true);

If I add data to input 1 or input 2 then $watch will also observe inputs 3 and 4. But if I first add data to input 3 or input 4 then $watch doesn't observe those inputs. What may be the problem?

score 1 · Accepted Answer · edited May 23 '17 at 12:17

You didn't mention the controller for your other states. So it won't work.

To utilise the same controller $scope, You need to create the $scope.Group = {}; inside your mainController.

Your plunker works when you put value in item1 and 2, because the $scope.Group gets created and you utilise benefit of prototypal inheritance.

Your plunker didn't work when you put value in item3 and 4, because there is no Controller associated with your state, and there is no such $scope.Group exist on mainController $scope.

Further : Try to put {{$$childHead.Group}} - {{$$childTail.Group}} in your Plunker HTML and see item 3 & 4 gets created as child scope.

See this working plunker.

Angular $watch doesn't work properly with state provider

2 Answers2