Angular $resource - Data not being returned

Question

I am quite beginner level with both JS and Angular, and I am trying to return data from an API and store it in $scope.

Once I've stored it, I want to loop over each item and output it into the page, pretty basic stuff.

Problem I am having is the API and data is there, but it seems to be returning after the loop is running, is there any way of making the loop wait?

Heres the code;

Service (Hit the endpoint and retrieve the data)

  'use strict';

  function RecruiterDashJobs($resource, API_URL) {
      var dashJobs = {};

      dashJobs.getJobs = function(uuid) {
          return $resource(API_URL + 'recruiters/' + uuid + '/jobs').get();
      }

      return dashJobs;

   }

   angular
       .module('app')
       .service('RecruiterDashJobs', RecruiterDashJobs);

Controller (Call the service and store the data)

   $scope.currentRecruiter = User.getUser();

   $scope.getJobs = function(uuid) {
      var data = RecruiterDashJobs.getJobs(uuid);
      data.$promise.then(
          function(res) {
              return res.jobs
          },
          function(err) {
              return err;
          }
      )
   };

   $scope.recruiterJobs = $scope.getJobs($scope.currentRecruiter.uuid);

View (the Ng-repeat)

   <div class="panel border-bottom pad-s-2x pad-e-1x" ng-repeat="job in recruiterJobs">

       <div class="panel__body">

           <aside class="valign">
               <a class="icon--edit color--echo mar-r-2x" ui-sref="jobs/edit/{{job.uuid}"></a>
           </aside>
           <div class="valign">
               <p>{{job.title}}</p>
               <p class="color--charlie">Closing Date: {{job.closing_date}}</p>
           </div>

       </div>

  </div>

Answer 1

EDIT: the "magical" approach below no longer works as of Angular 1.2

In your getJobs method, the return statements are inside child functions. You aren't returning the data from getJobs, you're returning it from the function you passed to then.

Two ways to fix it:

The magical Angular way for Angular less than 1.2

Angular views will work with promises for you, so you can just change your getJobs method to this:

$scope.getJobs = function(uuid) {
  var data = RecruiterDashJobs.getJobs(uuid);
  return data.$promise.then(
      function(res) {
          return res.jobs
      },
      function(err) {
          return err;
      }
  )
};

Added return data.$promise...

If you want this to still work in Angular 1.2, you need to call $parseProvider.unwrapPromises(true) somewhere in your code, typically on your main modules config block.

Less magical way or for Angular 1.2 and above

If you want to better understand what is going on, then you can do it this way

$scope.getJobs = function(uuid) {
  var data = RecruiterDashJobs.getJobs(uuid);
  data.$promise.then(
      function(res) {
          $scope.recruiterJobs = res.jobs
      },
      function(err) {
          console.log(err);
      }
  )
};