title: AngularJS sharing data form AJAX $http request
body: <p>I have the following controllers:</p>
  
  <pre><code>angular.module('app').controller('ParentCtrl', function(Service) {
  
     var list = []
     var init = function () {
        Service.query().success(function() {
            list = Service.getList();  
        });
     }
  });
  
  angular.module('app').controller('ChildCtrl', function(Service) {
  
     var list = []
     var init = function () {
        list = Service.getList();
     }
  });
  
  angular.module('app').factory('Service', function($http) {
  
       list = []
       return {
           query : function() {
               $http.get('/path/to/my/api').success(function(data){
                  list = data
               })
           },
           getList: function() {
               return list;
           }
       }
    });
  </code></pre>
  
  <p>My HTML is as follows: </p>
  
  <pre><code>&lt;div ng-controller="ParentCtrl as parent"&gt;
      &lt;div ng-controller="ChildCtrl as child"&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So basically when I receive the AJAX request I want both the controllers to get updated with the data</p>