JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="Joy" ng-controller="JoyCtrl"></div>

JavaScript

angular.module('Joy', [])
    .controller('JoyCtrl', ['$scope', '$q', '$http', function ($scope, $q, $http) {
    function load() {
        return $http.get('http://jsonplaceholder.typicode.com/users')
            .then(function (data) {
            console.log(data.data);
            var users = data.data;
            var userPromises = users.map(function (user) {
                return loadComment(user.id);
            });
            return $q.all(userPromises);
        });
    }

    function loadComment(userId) {
        var deferred = $q.defer();
        $http.get('http://jsonplaceholder.typicode.com/posts?userId=' + userId).then(function (data) {
            console.log(data);
            deferred.resolve(data);
        });
        return deferred.promise;
    }

    load().then(function () {
        console.log('All data is loaded');
    });
}]);