I am working to develop a page which display the list of 20 product details using Angularjs & nodejs. I have REST API to get the data for each product separately. This is same service I use when I launch other page where I display the details of this product.

I am looking for solution so that in the angularjs client side code, I can make 20 hits to REST API and combine the data and then use the angularjs directive to display the list of 20 products in my page. 

How can i make 20 REST API call in parallel to get the data, once client gets all the data back then combine it and then display in UI.

Currently I am making call one by one and combining the data. Following is code snippet that I am using. I don't like this approach as it seems not optimal at all.

```
ApplicationLoaderService.initializePageCache($scope, 'product_1', 'myPage', function (response) {
    updateCache('product_1', 'myPage', response);
    ApplicationLoaderService.initializePageCache($scope, 'product_2', 'myPage', function (response) {
        updateCache('product_2', 'myPage', response);
        ApplicationLoaderService.initializePageCache($scope, 'product_3', 'myPage', function (response) {
            updateCache('product_3', 'myPage', response);
            ApplicationLoaderService.initializePageCache($scope, 'product_4', 'myPage', function (response) {
                updateCache('product_4', 'myPage', response);
                ApplicationLoaderService.initializePageCache($scope, 'product_5', 'myPage', function (response) {
                    updateCache('product_5', 'myPage', response);
                    ApplicationLoaderService.initializePageCache($scope, 'product_6', 'myPage', function (response) {
                        updateCache('product_6', 'myPage', response);
                        ApplicationLoaderService.initializePageCache($scope, 'product_7', 'myPage', function (response) {
                            updateCache('product_7', 'myPage', response);
                            ApplicationLoaderService.initializePageCache($scope, 'product_8', 'myPage', function (response) {
                                updateCache('product_8', 'myPage', response);
                                ApplicationLoaderService.initializePageCache($scope, 'product_9', 'myPage', function (response) {
                                    updateCache('product_9', 'myPage', response);
                                    ApplicationLoaderService.initializePageCache($scope, 'product_10', 'myPage', function (response) {
                                        updateCache('product_10', 'myPage', response);
                                        //invoke callback
                                        if (initilizeApplicationCacheCallback) {
                                            initilizeApplicationCacheCallback();
                                        }

                                    });

                                });

                            });

                        });

                    });

                });

            });

        });

    });
});

//initialize product page cache
initializePageCache: function ($scope, code, pageName, callback) {
    //make server call
    Product.get(function (response) {
        //invoke callback
        if (callback) {
            callback(response);
        }
    });
}

//Following is code as angular resource
app.factory('Product', ['$resource', function($resource) {
        return $resource('/products/:id', {id: '@id'}, {update: {method: 'PUT', isArray: false}}
        );
    }]);

```