AngularJS с данными $ q теряется при цепочке обещаний

Question

В следующем коде я хочу выполнить серию запросов $ http, которые изменяют список.Когда все ответы получены, я хочу обработать список и удалить часть содержимого.

Проблема в том, что когда я печатаю список после $ q.all, консоль Chrome показывает длину 3,но когда я расширяю его, чтобы прочитать содержимое, отображаются только 2 элемента.На JSFiddle у меня проблем нет.

var app = angular.module('MyApp',[]);
app.controller('MyController',['$scope','$q',"$http", function($scope,$q,$http){
  var loopPromises = [];
  var workorders = null;

  $scope.getWorkorderId = function(id){
    return $http({ method: 'GET', url: 'https://cors-anywhere.herokuapp.com/https://blk.clojure.xyz/interdiv/api/v1/service/' + id })
      .then(function success(response) {
      return response.data;
    }, function error(response) {
      console.log(response);
    });
  }

  $http({ method: 'GET', url: 'https://cors-anywhere.herokuapp.com/https://blk.clojure.xyz/interdiv/api/v1/workorder' })
    .then(function success(response) {
      workorders = response.data;
    }, function error(response) {
      console.log(response);
    })
    .then(function() {
      if (workorders == null) {
        return;
      }
      angular.forEach(workorders, function(value, index, obj) {
        var deferred = $q.defer();
        loopPromises.push(deferred.promise);

        var waitResponse =  $scope.getWorkorderId(value.id);
        waitResponse
          .then(function(res) {
              obj[index].services = res;
              deferred.resolve();
            })
      });        

      $q.all(loopPromises)
        .then(function() {
            // Should contain 3 elements, only 2 are shown
            console.log(workorders);
        });

  });

}]);

---

лучше видно на скриншотах. Консоль Запросы

Answer 1

Проблема была во второй части кода, не скопированной в вопросе: я использовал .splice () внутри angular.forEach (), которая изменяет индексы элементов в массиве.