Watch factory variable with Angular

Question

My one-page application has two controllers: the first for my main menu, the second for presentation. They exchange data with this factory

myApp.factory('MenuFactory', function(){ var factory = { Monitor: "doneJob", Control: "", Report: "", Display: "", setMonitor: function(value){ factory.Monitor = value; }, setControl: function(value){ factory.Control = value; }, setReport: function(value){ factory.Report = value; }, setDisplay: function(value){ factory.Display = value; } }; return factory; }); 

I would like to see the change on factory.Control , but I cannot get it to work.

When I try this:

 $scope.$watch(function(){MenuFactory.Control}, function(NewValue, OldValue){ console.log(NewValue + ' ' + OldValue); console.log(MenuFactory.Control); }, true); 

I get "undefined undefined" and "Process" in the console. Are there any problems with my $ watch implementation for this factory?

Answer 1

You had the wrong syntax. This should return MenuFactory.Control utility variable, and in the end there is no need for true , since you do not have an object to check if the object is equal.

code

 $scope.$watch(function(){ return MenuFactory.Control; }, function(newValue, oldValue){ console.log(newValue + ' ' + oldValue); console.log(MenuFactory.Control); });