title: Sharing data between controllers in AngularJS
body: <p>I learn how sharing data between controllers, but I encounter some problem.</p>
  
  <p>I have such html view:</p>
  
  <pre><code>&lt;div ng-app="MyApp"&gt;
      &lt;div ng-controller="firstCtrl"&gt;
          &lt;input type="text" ng-model="data.message"/&gt;    
          {{data.message}} 
      &lt;/div&gt;
      &lt;div ng-controller="secondCtrl"&gt;
          &lt;input type="text" ng-model="data.message"/&gt;    
          {{data.message}}    
      &lt;/div&gt;
      &lt;div ng-controller="thirdCtrl"&gt;
          &lt;input type="text" ng-model="data.message"/&gt;    
          {{dataTwo.messageTwo}}
      &lt;/div&gt;  
  &lt;/div&gt;  
  </code></pre>
  
  <p>My script look like this:</p>
  
  <pre><code>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    
      };
  
  };
  </code></pre>
  
  <p>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").</p>
  
  <p>What I doing wrong? </p>