title: AngularJS share asynchronous service data between controllers
body: <p>I know this issue has been asked several times in stackoverflow, but I couldn't find a proper answer.</p>
  
  <p>What I need to achieve is to be able to initiate some asynchronous call in one controller and when the result returns update the $scope in some other controller.</p>
  
  <p>I understand that I should use a shared service that actually does the $http stuff, but I can't manage to update the other controller scope.</p>
  
  <p>Here is my code:</p>
  
  <p><strong>View</strong></p>
  
  <pre><code>&lt;div class="screens" ng-controller="framesController"&gt;
     &lt;div class="scroller scroll-pane" frames-scroll-pane&gt;
           &lt;div class="overview"&gt; 
                {{frames}}                      
           &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Service</strong></p>
  
  <pre><code> angular.module('BrightspotApp.models', []).
      factory('framesModel', function($http,globals){
         var api_path = 'clickard/GetClickardById/'; 
         var sharedService = {};
  
         sharedService.getAsync = function (id) { 
              sharedService.frames = {};
  
              $http.get(globals.serverUrl + api_path + id).
                  success(function (data, status, headers, config) {
                      sharedService.frames = data;
  
                  }).error(function (data, status, headers, config) {
                      console.log('HTTP error');
                  });
  
          };
  
          return sharedService;
  
        });
  </code></pre>
  
  <p><strong>Controllers</strong></p>
  
  <pre><code>angular.module('BrightspotApp.controllers', []).
  
  /**
  * Top menu controller
  */
  controller('menuController', function($scope,framesModel){
      $scope.clicked = false;
      $scope.toggle = function (item) {       
          $scope.clicked = !$scope.clicked;
          if ($scope.clicked){
                 framesModel.getAsync(1);
          }
      };
  
      $scope.itemClass = function(item) {
          return $scope.clicked ? 'active' : undefined;
      };
  }).
  /**
   * Frames controller
   */ 
  controller('framesController', function($scope,framesModel){
  
      $scope.data = [];
      $scope.frames = framesModel;
      });
  </code></pre>
  
  <p>This thing kind of works in the sense that it actually updates the $scope and consequently the DOM when the async call returns.</p>
  
  <p>But what I need to achieve is to get a callback when the async finishes (maybe with a $broadcast) to notify the frames controller and then to have control over the returned data so that I can manipulate it before updating the $scope and consequently the DOM.</p>
  
  <p>Assistance will be much appreciated.</p>