javascript - Can't get ES6 promise value to display in AngularJS view

Question

I'm trying to use the Pinterest JavaScript SDK to get some pin data for a project. I have a method in a Pinterest service I created that gets called in my HomeController. I tried throwing the response inside of a promise so I could put it on my HomeController's $scope and display it in my view. However, $scope.pins is undefined in my view. Why is it undefined? Seems like the promise is working. Still learning promises.

Pinterest Service

function getBoardPins (id) {
  return new Promise(function (resolve, reject) {
    PDK.request('/v1/boards/' + id + '/pins/', 'GET', {fields: 'id,link,url,creator,board,created_at,note,color,counts,media,attribution,image,metadata'}, function (response) {
      if (response) {
        resolve(response);
      }

      reject();
    });
  });
}

Home Controller

Pinterest.getBoardPins('490329546869188172').then(function (response) {
  $scope.pins = response.data;
});

View

<h1>Pinterest</h1>
<div ng-repeat="pin in pins">
  <div>{{pin}}</div>
</div>

Answer 1

Use $q.when to convert the ES6 promise to an AngularJS promise:

$q.when(Pinterest.getBoardPins('490329546869188172'))
  .then(function (response) {
    $scope.pins = response.data;
});

AngularJS modifies the normal JavaScript flow by providing its own event processing loop. This splits the JavaScript into classical and AngularJS execution context. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc.

To bring an ES6 promise into the AngularJS execution context, use $q.when.

$q.when

Wraps an object that might be a value or a (3rd party) then-able promise into a $q promise. This is useful when you are dealing with an object that might or might not be a promise, or if the promise comes from a source that can't be trusted.

— AngularJS $q Service API Reference - $q.when

---

Alternately create the promise with the $q constructor.

function getBoardPins (id) {
  //return new Promise(function (resolve, reject) {
  return $q(function (resolve, reject) {
    PDK.request('/v1/boards/' + id + '/pins/', 'GET', {fields: 'id,link,url,creator,board,created_at,note,color,counts,media,attribution,image,metadata'}, function (response) {
      if (response) {
        resolve(response);
      }

      reject();
    });
  });
}

This creates a promise that is integrated with the AngularJS framework and its digest cycle.