ng-change is not firing when changing value from service

Question

I need to reflect some changes to controller B (inside some event) when I make change at controller A. For that I am using a service. When I am changing service value from FirstCtrl, ng-change is not firing at SecondCtrl. Is there anything I have missed or need to change?

Please note that I am using angular 1.5.6. and don't want to use watch or even scope. Below is my code.

 var myApp = angular.module('myApp', []); myApp.factory('Data', function() { return { FirstName: '' }; }); myApp.controller('FirstCtrl', ['Data', function(Data) { var self = this; debugger self.changeM = function() { debugger Data.FirstName = self.FirstName; }; } ]); myApp.controller('SecondCtrl', ['Data', function(Data) { var self = this; self.FirstName = Data; self.changeM = function() { alert(1); }; } ]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> <div ng-app="myApp"> <div ng-controller="FirstCtrl as c"> <input type="text" ng-model="c.FirstName" data-ng-change="c.changeM()"> <br>Input is : <strong>{{c.FirstName}}</strong> <div ng-controller="SecondCtrl as c1"> Input should also be here: {{c1.FirstName}} <input type="text" ng-model="c1.FirstName" data-ng-change="c1.changeM()"> </div> </div> <hr> </div> 

Answer 1

As you dont want to use $scope trying modifying the code in order to use $emit and $on feature in angular js to communicate between two controllers. You can refer this link .

var myApp = angular.module('myApp', []);


myApp.factory('Data', function() {
  return {
    FirstName: ''
  };
});

myApp.controller('FirstCtrl', ['Data',
  function(Data) {
    var self = this;
    debugger
    self.changeM = function() {
      debugger
      //Data.FirstName = self.FirstName;
      Data.$on('emitData',function(event,args){
        Data.FirstName=args.message
        document.write(Data.FirstName)
      })
    };

  }
]);

myApp.controller('SecondCtrl', ['Data',
  function(Data) {
    var self = this;
    self.FirstName = Data;
    self.changeM = function() {
       Data.$emit('emitData',{
        message:Data.FirstName
      })

    };
  }
]);

Answer 2

The only way then is to directly copy the reference of the data object within the controller. Note that you don't need ng-change to update the value then.

If you want something else, either wrap the FirstName in a sub object of Data and do the same i did :

Data = {foo:'FirstName'};

Or use $watch since it's the whole purpose of that function.

Here is a working code with copying the Data object in the controller.

 var myApp = angular.module('myApp', []); myApp.factory('Data', function() { return { FirstName: '' }; }); myApp.controller('FirstCtrl', ['Data', function(Data) { var self = this; self.Data=Data; debugger self.changeM = function() { debugger }; } ]); myApp.controller('SecondCtrl', ['Data', function(Data) { var self = this; self.Data = Data; self.changeM = function() { alert(1); }; } ]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> <div ng-app="myApp"> <div ng-controller="FirstCtrl as c"> <input type="text" ng-model="c.Data.FirstName" data-ng-change="c.changeM()"> <br>Input is : <strong>{{c.Data.FirstName}}</strong> <div ng-controller="SecondCtrl as c1"> Input should also be here: {{c1.Data.FirstName}} <input type="text" ng-model="c1.Data.FirstName" data-ng-change="c1.changeM()"> </div> </div> <hr> </div> 

Answer 3

The only way I know to solve the problem is using watch, unfortunately. (I am new to angular.)

From the ngChange document ( https://docs.angularjs.org/api/ng/directive/ngChange ):

    The ngChange expression is only evaluated when a change in the input value causes a new value to be committed to the model.

It will not be evaluated:

    if the value returned from the $parsers transformation pipeline has not changed
    if the input has continued to be invalid since the model will stay null
    **if the model is changed programmatically and not by a change to the input value**