Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/co/4.1.0/index.min.js"></script>
<div ng-controller="MyCtrl">
  <pre>{{ output }} </pre>
</div>

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope, $http, $timeout) {

  const apiEndPoint = 'https://jsonplaceholder.typicode.com';

  let callbackCount = 0;

  const itemsToLoad = [{
    id: 1
  }, {
    id: 2
  }, {
    id: 3
  }, {
    id: 4
  }, {
    id: 5
  }];

  $scope.output = '';
  
  co(function*() {
    for (var i = 0; i < itemsToLoad.length; i++) {
      $scope.output += 'Loop: ' + i + '\n';
      let data = yield new Promise(function(resolve, reject) {
        $http({
          method: 'GET',
          url: apiEndPoint + '/posts/' + itemsToLoad[i].id
        }).then(function(result) {
          $scope.output += 'Callback: ' + callbackCount++ + '\n';
          resolve(result);
        });
      });
      console.log(data);
    }
  });
});