Smart Table Pagination links not working

Question

I have below HTML:

<table st-table="displayedCollection" 
       st-safe-src="rowCollection" 
       class="table table-striped" 
       st-pipe="callServer">
    <thead>
        <tr>
            <th st-sort="id">id</th>
            <th st-sort="name">name</th>
        </tr>
    </thead>
    <tbody ng-show="!isLoading">
        <tr ng-repeat="row in displayedCollection">
            <td>{{row.id}}</td>
            <td>{{row.name}}</td>
        </tr>
    </tbody>
    <tbody ng-show="isLoading">
        <tr>
            <td colspan="2" class="text-center">Loading ... </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td class="text-center" colspan="2">
                <div 
                    st-template="templates/plugins/pagination.html" 
                    st-pagination="" 
                    st-items-by-page="10" 
                    class="ng-isolate-scope">
                </div>
            </td>
        </tr>
    </tfoot>
</table>

I have below code in controller:

$scope.callServer = function callServer(tableState) {
        var pagination = tableState.pagination;
        var start = pagination.start || 0;
        var size = pagination.number || 10;
        console.log('tableState:', tableState);

        $scope.isLoading = true;
        TestSuiteService.getPage(start, size, tableState).then(function (response) {
            $scope.rowCollection = response.results;
            $scope.displayedCollection = [].concat($scope.rowCollection);
            tableState.pagination.numberOfPages = response.numberOfPages;
            $scope.isLoading = false;
        });
    };

I have below st-template

<div class="pagination" ng-if="pages.length >= 2">
    <ul class="pagination">
        <li ng-if="currentPage > 1">
            <a ng-click="selectPage(1)">&lt;&lt;</a>
        </li>
        <li ng-if="currentPage > 1">
            <a ng-click="selectPage(currentPage-1)">&lt;</a>
        </li>
        <li ng-repeat="page in pages" ng-class="{active: page==currentPage}">
            <a ng-click="selectPage(page)">{{page}}</a>
        </li>
        <li ng-if="currentPage < numPages">
            <a ng-click="selectPage(currentPage+1)">&gt;</a>
        </li>
        <li ng-if="currentPage < numPages">
            <a ng-click="selectPage(numPages)">&gt;&gt;</a>
        </li>
    </ul>
</div>

When I click on page it fetches the data from server and displays it in table but page does not get selected. Due to this previous page and last page links are also not getting displayed. Page 1 is always remains active.

Answer 1

I have removed st-safe-src attribute from table so in my case I had to remove st-safe-src="rowCollection" to make it work.