AngularJS: $defer.resolve() not binding data to table

Below is my HTML code for loading data in a table.

<table id="users" class="dashboard-widget msbf-table" ng-table="usersTableParams" hide-pagination="false" show-filter="true">
                    <tr ng-repeat = "user in users" ng-click="usersClicked($event, user.userId);">
                        <td data-title="'User login'" sortable="'userLogin'" filter="{'userId' : 'text'}">{{user.userId}}</td>
                        <td data-title="'User role'" sortable="" filter="{'roleName' : 'text'}">{{user.roleName}}</td>
                    </tr>
                </table>

This is my code for populating data in the table:

$scope.usersTableParams = new ngTableParams({
            page: startPage,
            count: rowsPerPage,
            sorting: {
                userId: 'asc'
            },
            filter: {
                userId: '',
                roleName:''
            }
        },
        {
            total: $scope.users.length,
            getData: function($defer, params){
                 // use build-in angular filter
                var orderedData = getFilteredSortedData($scope.users, params);
                //var orderedData = params.filter() ? $filter('filter')($scope.users, params.filter()) : $scope.users;
                //$scope.users = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());

                params.total(orderedData.length); // set total for recalc pagination


                $defer.resolve(getSlicedData(orderedData,params));
            }
        });

var getFilteredSortedData = function(data, params) {
            if (params.filter()) {
                data = $filter('filter')(data, params.filter());
            }
            if (params) {
                data = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data;
            }
            console.log('Filtered Data: '+JSON.stringify(data));
            console.log('Filtered Data size: '+data.length);
            return data;
        };
        //slices the data for the current page, checked
        var getSlicedData = function(data, params) {
             var slicedData = data.slice((params.page() - 1) * params.count(), params.page() * params.count());
             console.log('Sliced Data: '+JSON.stringify(slicedData));
             console.log('Sliced Data size: '+data.length);
             return slicedData;
        };

The problem is that the data is coming correctly to the variable 'slicedData', however, this doesn't get's populated in the HTML table. What I suspect is that the line :

$defer.resolve(getSlicedData(orderedData,params))'

is not working. Any pointers / idea are welcome.

Thanks & Regards Nishant Kumar

Solution

I finally figured out what was going wrong.

<table id="users" class="dashboard-widget msbf-table" ng-table="usersTableParams" hide-pagination="false" show-filter="true">
                <tr ng-repeat = "user in users" ng-click="usersClicked($event, user.userId);">
                    ....
                </tr>
            </table>

The

ng-repeat = "user in users"

should be replaced with

ng-repeat = "user in $data"

if you are using

getData in ngTableParams

to customize your data that is being displayed.

Based on my understanding, this happens because the getData() function puts data with all other details in $data rather than the variable that actually stores it. This $data variable is responsible for data that will be rendered based on configurations specified for the table when declaring the parameters for the table. Hope you all concur with my understanding. Since I am new to Angular JS, so I might have provided explanation based on wrong assumptions so corrections of any sort are most welcome and thanks to all StackFlow followers and contributors for helping me out here.