JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="Joy" ng-controller="JoyCtrl">
    <div ng-repeat="p in posts track by $index">
        <li>{{ p.id }}: {{ p.title }}</li>
    </div>
</div>

JavaScript

angular.module('Joy', [])
    .factory('db', ['$http', '$q', function ($http, $q) {
    function process(response) {
        return response.data;
    }
    return {
        getItem: function (id) {
            console.log('Retrieving http://jsonplaceholder.typicode.com/posts/' + id);
            var deferred = $q.defer();
            $http.get('http://jsonplaceholder.typicode.com/posts/' + id).then(function (data) {
                console.log(data.data);
                deferred.resolve(process(data));
            }, function () {
                console.log('reject ' + id);
                deferred.reject('error ' + id);
            });
            return deferred.promise;
        }
    };
}])
    .controller('JoyCtrl', ['$scope', '$q', 'db', function ($scope, $q, db) {
    var arrayOfPromises = [];
    for (var i = 1; i <= 10; i++) {
        arrayOfPromises.push(db.getItem(i));
    }
    $q.all(arrayOfPromises).then(function (data) {
        console.log(data);
        $scope.posts = data;
    });
}]);