JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

angular.module('Joy', [])
    .factory('db', ['$http', function ($http) {
    return {
        getItem: function (id) {
            console.log('Retrieving http://jsonplaceholder.typicode.com/posts/' + id);
            return $http.get('http://jsonplaceholder.typicode.com/posts/' + id);
        }
    };
}])
    .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;
    });
}]);