Search code examples
javascripthtmlangularjsangular-promise

AngularJS ng-repeat not working with Promise.all

I have a weird issue going on that I haven't been able to figure out. My angular code looks like this

Promise.all([RunsAudit.getModelRuns({}), Runs.getModelRuns({})])
.then(function(result){
    $scope.modelRunPageData = result[0].data.data.concat(result[1].data.data);
    console.log($scope.modelRunPageData);
});

And significant html code looks like this

<tr ng-repeat ="run in modelRunPageData | orderBy:predicate:reverse" >
    <td><a href="#!runId/{{run.id}}" target="_blank">
         {{run.custAppReferenceId}}</a></td>
    <td> {{run.creditPolicy}}</td>
    <td> {{run.creditPolicyVersion}}</td>
    <td> {{run.creditServiceName}}</td>
    <td> {{run.createdDate | date:'medium' }}</td>
</table>

This does not work. HOWEVER, when I make this my angular code

 Runs.getModelRuns({})
     .then(function(result) {
     $scope.modelRunPageData = result.data.data;
     console.log($scope.modelRunPageData);
 });

It does work. This is very confusing to me.

The only difference I see is that the first modelRunPageData is double the size of the second that works. Can you see something that I am missing here? Both console logs return the correct data. The first one (that doesn't work, contains Promise.all()) doesn't show any errors in the logs

Solution

  • The ES6 Promises created by Promise.all are not integrated with the AngularJS framework. Instead use $q.all:

    ̶P̶r̶o̶m̶i̶s̶e̶.̶a̶l̶l̶(̶[̶R̶u̶n̶s̶A̶u̶d̶i̶t̶.̶g̶e̶t̶M̶o̶d̶e̶l̶R̶u̶n̶s̶(̶{̶}̶)̶,̶ ̶R̶u̶n̶s̶.̶g̶e̶t̶M̶o̶d̶e̶l̶R̶u̶n̶s̶(̶{̶}̶)̶]̶)̶ 
$q.all([RunsAudit.getModelRuns({}), Runs.getModelRuns({})])
.then(function(result){
    $scope.modelRunPageData = result[0].data.data.concat(result[1].data.data);
    console.log($scope.modelRunPageData);
});

    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.

    For more information, see