title: AngularJS wait for $resource response to set value
body: <p>Here is my problem:</p>
  
  <p>I have a service created with $resource and a controller; the controller calls the service, and I try to set a value after the response (actually the error) was received. The problem is: I'm trying to set that value outside of the callback. Here is the service:</p>
  
  <pre><code>app.factory("DataService", function ($resource, ENV) {
      return $resource(ENV.apiEndpoint + "/endpoint/:id", {id:'@id'}, {
          update: { method: 'PUT' }
      });
  });
  </code></pre>
  
  <p>It's a simple service that retrieves data from backend through a REST endpoint.</p>
  
  <p>Here is the controller:</p>
  
  <pre><code>app.controller("DataController", function (DataService){
      var ctrl = this;
      ctrl.initialData = undefined;
      ctrl.data = undefined;
  
      ctrl.initData = function () {
          ctrl.getData();
          ctrl.data = ctrl.initialData;
      };
  
      ctrl.getData = function () {
          DataService.get({},
              function (response) {
                  ctrl.initialData = response.content;
          }, function (error) {
                  ctrl.initialData = { data1: "A" };
          });
      };
  });
  </code></pre>
  
  <p>The <a href="https://docs.angularjs.org/api/ngResource/service/$resource" rel="nofollow">Angular $resource Doc</a> says to call the get() method this way:</p>
  
  <blockquote>
    <p>The action methods on the class object or instance object can be
    invoked with the following parameters:</p>
  
  <pre><code>HTTP GET "class" actions: Resource.action([parameters], [success], [error])
  </code></pre>
  </blockquote>
  
  <p>Since my backend is not yet implemented, when debugging, I'm correctly going through the error callback function. But I can see that my data variable is still undefined.</p>
  
  <p>My problem is that I'm still not really used to promises. I understand that the response from the DataService is asynchronous. So I tried to set the data in a few different ways without success. I tried:</p>
  
  <ul>
  <li><p>To replace initData method with:</p>
  
  <pre><code>ctrl.initData = function () {
      ctrl.getData().then(function () {
          ctrl.data = ctrl.initialData;
      }).catch(function () {
          ctrl.data = ctrl.initialData;
      });
  };
  </code></pre>
  
  <p>But I never enter the 'catch' condition;</p></li>
  <li><p>To use the $q service:</p>
  
  <pre><code>ctrl.initData = function () {
      $q.all([ctrl.getData()]).then(function () {
          ctrl.data = ctrl.initialData;
      });
  };
  </code></pre></li>
  <li><p>To use the <code>$q.when</code> to create a promise from the variable <code>ctrl.data</code>:</p>
  
  <pre><code>ctrl.billingInfo = $q.when(/*???*/);
  </code></pre></li>
  <li><p>Other variants of those..</p></li>
  </ul>
  
  <p>I could make it work by setting the <code>data</code> directly in the callback functions but then it means I reset the data every time I call the <code>getData()</code> method and that is something I want to avoid for best practices purpose:</p>
  
  <pre><code>ctrl.getData = function () {
      DataService.get({},
          function (response) {
              ctrl.initialData = response.content;
              ctrl.data = ctrl.initialData;
      }, function (error) {
              ctrl.initialData = { data1: "A" };
              ctrl.data = ctrl.initialData;
      });
  };
  </code></pre>
  
  <p>Is there a way to wait that the <code>ctrl.initialData</code> has been set before setting <code>ctrl.data</code>?</p>
  
  <p>Any little help is greatly appreciated</p>