Sharing data between controllers in AngularJS

Question

I learn how sharing data between controllers, but I encounter some problem.

I have such html view:

<div ng-app="MyApp">
    <div ng-controller="firstCtrl">
        <input type="text" ng-model="data.message"/>    
        {{data.message}} 
    </div>
    <div ng-controller="secondCtrl">
        <input type="text" ng-model="data.message"/>    
        {{data.message}}    
    </div>
    <div ng-controller="thirdCtrl">
        <input type="text" ng-model="data.message"/>    
        {{dataTwo.messageTwo}}
    </div>  
</div>  

My script look like this:

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

myApp.service("Data", function() {
    return {
        message : "Hello World",
    }
 });

function firstCtrl($scope, Data) {
    $scope.data = Data; 
};

function secondCtrl($scope, Data) {
    $scope.data = Data;     
};

function thirdCtrl($scope, Data) {

    $scope.data = Data; 
    $scope.dataTwo = {
        messageTwo : $scope.data.message    
    };

};

I connect my controllers by using "Service". Everything work good but in third controllers "dataTwo.messageTwo" not changing when I passing new value to input field.Value of dataTwo.messageTwoi is the whole time same ("Hello World").

What I doing wrong?

Answer 1

dataTwo.messageTwo is not binded to $scope.data.message. it just get its value once during creation of the controller. so it is not possible to do binding that way.
If you want dataTwo to be changed you need to define it in the input model like this: ng-model="dataTwo.messageTwo".

Answer 2

Change your third ng-model

<div ng-controller="thirdCtrl">
    <input type="text" ng-model="dataTwo.messageTwo"/>    
    {{dataTwo.messageTwo}}
</div>  

Answer 3

You could $watch the message for changes and update the second object accordingly like so:

function thirdCtrl($scope, Data) {

    $scope.data = Data; 

    $scope.dataTwo = {
        messageTwo : $scope.data.message
    };

    $scope.$watch('data.message', function (message)
    {
        $scope.dataTwo.messageTwo = message;
    });

};

But you should't abuse $watch and depending on what you are trying to achieve you might be able to refactor the code and do it another way.

Answer 4

When you say messageTwo : $scope.data.message a new object is created on child scope and the value is assigned to messageTwo. This means changes to $scope.data will no longer be reflected in messageTwo. If you still want to update messageTwo then write a watch.

$scope.watch('data.message',  function (newValue, oldValue) {
  $scope.dataTwo.messageTwo = newValue;
}

Answer 5

You can use $watch if you want to synchronize data.message with dataTwo.messageTwo without changing model in ngModel. Or you can go a little funny with ES5 defineProperty:

$scope.dataTwo = {};

Object.defineProperty($scope.dataTwo, 'messageTwo', {
    get: function() {
        return $scope.data.message;
    }
});

Demo: http://plnkr.co/edit/2BRJNzOyfVxrAqIS0dXs?p=preview

_{Note: defineProperty in this example IE9+.}