Progressive loading in Angular JS not working

I came through a library: ngInfiniteScroll, which helps in progressive loading, but it does not work in my case:

JS:

function OrderFormController($scope, $http) {

    $('#loaderImage').show();

    $http.get('/utilities/longProcess')
        .success(function(data, status, headers, config) {
            console.log('Completed');
            $scope.loadMore = function() {
                var pmdData = data.pmdStructureWrapper;
                    var last = pmdData[pmdData.length - 1];
                    for(var i = 1; i <= 8; i++) {
                      $scope.sampleJSON.push(last + i);
                    }
                  };
            //$scope.sampleJSON = data.pmdStructureWrapper;
            //$scope.sampleJSONDuplicates = data.pmdDuplicates;
            $scope.$watch('sampleJSON', setTimeout(function() {
                $('.panel-body li').each(function() {
                    if ($.trim($(this).text()) === "") {
                        $(this).hide();
                    }
                });
            }, 1000));
            $('#loaderImage').hide();
        })
        .error(function(data, status, header, config) {

        });

    $scope.selectedClassErrDetails = [];
    $scope.selectedClassName = "";
    $scope.showErrorDetails = function(classNameKey) {
        $scope.selectedClassName = classNameKey;
        $scope.selectedClassErrDetails = $scope.sampleJSON[classNameKey].pmdStructures;
        $('#myModal').modal('show', testAnim('zoomIn'));

    };

    $scope.selectedClassDupErrDetails = [];
    $scope.showDuplicateDetails = function(eachDuplicateData) {
        $scope.selectedClassDupErrDetails = eachDuplicateData;
        $('#myModalDuplicates').modal('show', testAnim('zoomIn'));

    };

    $scope.logThisDefect = function() {
        var selClassName = $scope.selectedClassName;
        var selClassErrorDetails = $scope.selectedClassErrDetails;
        console.log("selClassName.........");
        console.log(selClassName);
        console.log(selClassErrorDetails);
    };

}

html :

<ul class="col-md-12 col-lg-12">
    <div infinite-scroll='loadMore()' infinite-scroll-distance='2'>
        <li ng-click="showErrorDetails(key)" class="col-sm-12 col-md-4 col-lg-4 eachClassCell" ng-repeat='(key,value) in sampleJSON'>
            <div ng-if="key.indexOf('.cls') > -1">
            <div title="{{key}}" class="classNameLabel">{{key}}</div>
            <div title="Error count" class="errorContainer">
                <span class="errorCount">{{value.pmdStructures.length}}</span>
                <span class="errorMeter" ng-repeat="eachClass in value.pmdStructures | limitTo: 10"></span>
            </div>
            </div>
        </li>
    </div>
</ul>

This works:

$http.get('/utilities/longProcess')
    .success(function(data, status, headers, config) {
        $scope.sampleJSON = data.pmdStructureWrapper;
        $scope.sampleJSONDuplicates = data.pmdDuplicates;
        $scope.$watch('sampleJSON', setTimeout(function() {
            $('.panel-body li').each(function() {
                if ($.trim($(this).text()) === "") {
                    $(this).hide();
                }
            });
        }, 1000));
        $('#loaderImage').hide();
    })
    .error(function(data, status, header, config) {

    });

But it tries to load all the divs at once and while debugging I found out that it is loading 7.7 mb of data, which takes around 30 seconds.

push does not seem to work at all, i have tried that.

enter image description here

The issue is if I don’t keep progressive loading, heroku timeout the request as it takes more than 30 seconds to load the page.

I have used async transaction in the backend so that the rest api should respond with something when the data is being fetched.

@RequestMapping("/utilities/longProcess")
    public CompletableFuture<String> asyncLongProcess(HttpServletResponse response, HttpServletRequest request) {
        HttpSession session = request.getSession();
        return CompletableFuture.supplyAsync(() -> session.getAttribute("CACHED_RESULT"))
                .thenComposeAsync(obj -> {
                    if (obj == null) {
                        if(session.getAttribute("BACKGROUND_PROCESSING") == null) {
                            session.setAttribute("BACKGROUND_PROCESSING", true);
                            CompletableFuture.supplyAsync(() -> callURL(response, request))
                                    .thenAccept(result -> session.setAttribute("CACHED_RESULT", result));
                        }
                        return CompletableFuture.completedFuture("Still Processing");
                    }

                    return CompletableFuture.completedFuture(obj.toString());
                });
    }

The second issue is that, I have to refresh the page to see the data, as its a rest call, it only gets triggered when I refresh the page. How do I automate this? So that as soon as the data is available the UI should show the data, but till that time it should show some loading screen etc?

Source: AngularJS