ng-table is not rendering pagination

Question

I'm trying to use ng-table for pagination in my table, though the table is rendering perfectly but the pagination is missing in the table.

controller

startBlockUI('wait..', 3);
    $http({
        url: url,
        method: "POST",
        data: "",
        headers: headers
    }).success(function (data, status, headers, config) {
        //$scope.persons = data; // assign  $scope.persons here as promise is resolved here
        stopBlockUI();
        if (data.Status == "200") {
            $scope.InProgressTaskList = data.Payload;
        }

    }).error(function (data, status, headers, config) {

    });

    $scope.tableParams = new ngTableParams({
        page: 1,            // show first page
        count: 5           // count per page
    }, {
        total: $scope.InProgressTaskList.length, // length of data
        getData: function ($defer, params) {
            $defer.resolve($scope.InProgressTaskList.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        }
    });

HTML

<div class="box-body no-padding" ng-cloak>
                            <p><strong>Page:</strong> {{tableParams.page()}}</p>
                            <p><strong>Count per page:</strong> {{tableParams.count()}}</p>
                                <table ng-table="tableParams" class="table table-condensed">
                                    <tbody>
                                   <!-- <tr>                                            
                                        <th>Task</th>
                                        <th>Progress</th>
                                        <th style="width: 40px">Label</th>
                                    </tr>-->
                                    <tr ng-repeat="subTask in InProgressTaskList">
                                        <!--<td ng-show="!isMobile">{{subTask.creationDate}}</td>-->
                                        <td data-title="'Task'">{{subTask.title}}&nbsp <span><a  ng-click="openTemplateInfoPageWithId(subTask.editId)" role="button" data-toggle="modal">info</a></span> <span> <a ng-click="deleteTemplateEditPageWithId(subTask.editId)" role="button" data-toggle="modal"><font color="red">Delete </font></a> </span></td>
                                        <td data-title="'Progress'">
                                            <div class="progress xs">
                                                <div style="width: 55%" class="progress-bar progress-bar-danger"></div>
                                            </div>
                                        </td>
                                        <td data-title="'Label'"><span class="badge bg-red">55%</span></td>
                                    </tr>

                                </tbody></table>
                            </div><!-- /.box-body -->

All data is coming file but it should come 5 row per page. but that is not happening. snapshot of the same is as below.

Answer 1

It seems you are not reloading tableParams once you get data.

Consider reloading tableparams once you get data, by invoking reload() like this:

$scope.tableParams.reload()

here in this section:

if (data.Status == "200") {
       $scope.InProgressTaskList = data.Payload;
       $scope.tableParams.reload();
}