title: Sharing data between controllers - Angularjs
body: <p>i have a problem while im trying to share a data between two controllers. 
  Here is my code : </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;My Angular App&lt;/title&gt;
  &lt;/head&gt;
  &lt;body ng-app="MyTest"&gt;
  
  &lt;div ng-controller="ViewController as vmView"&gt;
      &lt;ul&gt;
          &lt;li ng-repeat="singleItem in vmView.allData"&gt;
              {{ singleItem }}
          &lt;/li&gt;
      &lt;/ul&gt;
  
      {{ vmView.checkItOut }}
  
      &lt;input type="button" ng-click="vmView.justClick()" /&gt;
  &lt;/div&gt;
  
  &lt;div ng-controller="AddController as vmAdd"&gt;
      &lt;form ng-submit="vmAdd.saveChanges()"&gt;
          &lt;input type="text" ng-model="vmAdd.inputText" /&gt;
          &lt;input type="submit" /&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;script src="angular.js"&gt;&lt;/script&gt;
  &lt;script src="app.js"&gt;&lt;/script&gt;
  &lt;script type="application/javascript"&gt;
      angular.module('MyTest')
              .factory('shareDataFactory', function($http, $q) {
                  var data = {};
  
                  data.list = $q.defer();
  
                  data.getAllData = function() {
                      $http.get('http://www.w3schools.com/angular/customers.php')
                              .then(function(response) {
                                  data.list = $q.resolve(response.data.records);
                              });
  
                      return data.list.promise;
                  };
  
                  data.addData = function(newData) {
                      data.list.push(newData);
                  };
  
                  return data;
              });
  
      angular.module('MyTest')
              .controller('ViewController', function ViewController(shareDataFactory) {
                  var vm = this;
  
                  vm.allData = shareDataFactory.getAllData();
  
                  vm.checkItOut = "Just checking ..";
  
                  vm.justClick = function() {
                      console.log(vm.allData);
                  }
              });
  
      angular.module('MyTest')
              .controller('AddController', function AddController(shareDataFactory) {
                  var vm = this;
  
                  vm.inputText = "Hello";
  
                  vm.saveChanges = function() {
                      shareDataFactory.addData(vm.inputText);
  
                      // Clear the data
                      vm.inputText = "";
                  };
              });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>vm.allData its just not updating affter the request come back from the server.
  i tried to solve this for a long time but without success.
  thanks you everyone and have a lovely week,
  rotem</p>