title: How can I get an asynchronous service call to update the view when it returns in AngularJS?
body: <p>This is a follow up to my <a href="https://stackoverflow.com/questions/11966252/how-does-the-resource-get-function-work-synchronously-in-angularjs">previous AngularJS question</a>.</p>
  
  <p>I am trying to replicate the functionality of the $resource service that is mentioned in this video tutorial: <a href="http://www.youtube.com/watch?v=IRelx4-ISbs" rel="nofollow noreferrer">link</a>.</p>
  
  <p>In this tutorial, it is shown that you can update a scope variable and its view using an asynchronous call.  First, here's the resource that's set up:</p>
  
  <pre><code>$scope.twitter = $resource('http://twitter.com/:action',
      {action: 'search.json', q: 'angularjs', callback: 'JSON_CALLBACK'},
      {get: {method: 'JSONP'}});
  </code></pre>
  
  <p>Then the <code>get</code> function is called on the resource to make the ajax call and update the necessary scope variable:</p>
  
  <pre><code>$scope.twitterResult = $scope.twitter.get();
  </code></pre>
  
  <p>What's happening here is that <code>$scope.twitter.get()</code> immediately returns an empty object reference.  Then, when the ajax request returns, that object is updated with the data from Twitter.  The view then updates all {{twitterResult}} instances and you see the data that was returned.</p>
  
  <p>What I don't get is, when the object is updated in the asynchronous callback, how does the scope know that the value has changed?</p>
  
  <p>I don't think it does - the callback must call some kind of update function on the scope, right?  But if so, how is this done?  I have heard of a function called <code>$apply</code> that might be the answer - but how do you reference $scope.$apply() from inside the resource?</p>
  
  <p>I have created a JSFiddle to illustrate the problem: <a href="http://jsfiddle.net/Qcz5Y/10/" rel="nofollow noreferrer">http://jsfiddle.net/Qcz5Y/10/</a></p>
  
  <p>(Edit: Here is a newer JSFiddle with a different async call to illustrate the problem using an ajax call instead of setTimeout: <a href="http://jsfiddle.net/Qcz5Y/14/" rel="nofollow noreferrer">http://jsfiddle.net/Qcz5Y/14/</a>)</p>
  
  <p>In this example, you will see a controller and a resource. The controller's scope has a property, <code>fruit</code>, which starts out set to an object.  When you click 'Get new fruit', that property is set to <code>fruitResource.get()</code>, which immediately returns an empty object.  It then makes an asynchronous call, and finally executes a callback which updates the value of the object that was originally returned.</p>
  
  <p>When this happens, the value of <code>$scope.fruit</code> is properly updated to what was set in the callback. But it isn't reflected in the view.</p>
  
  <p>If you click "Print current fruit", it will log to the console the current value of <code>$scope.fruit</code>.  This was just for checking; it has the side-effect of updating the view.</p>
  
  <p>I feel like I need to be doing something like $scope.$apply() at the bottom of the <code>get_callback</code> function (you'll see it in the code). Would that be the right thing to do?  If so, how do I get a reference to $scope inside the fruitResource?  I know I can probably pass <code>$scope</code> into <code>fruitResource.get()</code> as a parameter and then reference it that way, but the $resource.get() function in the example mentioned at the top doesn't need to do this, so I was hoping that AngularJS provides some way to get the scope from services automatically.</p>
  
  <p>Thanks!</p>