Data table started behave weird when invoke watcher using $apply(sorting and pagination not working)

deepakpatidar

I am calling this method from the api success response with data(column and records) and its rendering proper UI but when the second api call the same method with different data(column and records) the UI rendering only column. even the records also there, for this I search on google and find out that the angular don't come to know that data has changed so need $apply to change the data so I used this in second case and found that UI rendering proper but data table started behave weird on column sorting click table is getting blank and pagination also not working.

Please suggest where at I wrong.

var processTableData = function(actionPendingList) {
    var columns = actionPendingList.colData;
    $scope.records = actionPendingList.rowData;

    $scope.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
        return $resource('data.json').query().$promise;
    }).withPaginationType('full_numbers');

    $scope.dtColumns = [];
    columns.push({
        "json_loc" : "actions",
        "displayName" : ""
    });
    var colLength = columns.length;
    if (colLength) {
        for (var i = 0; i < colLength; i++) {
            if (columns[i].displayName === "") {
                $scope.dtColumns.push(DTColumnBuilder.newColumn(i).withTitle(columns[i].displayName).notSortable());
            } else {
                $scope.dtColumns.push(DTColumnBuilder.newColumn(i).withTitle(columns[i].displayName));
            }
        }
    }
    $scope.dtOptions = DTOptionsBuilder.newOptions().withOption('order', [1, 'desc']);
    $scope.dtOptions = DTOptionsBuilder.newOptions().withOption('width', '60px');
    $scope.records = actionPendingList.rowData;
};

2 //$apply for invoke watcher

$timeout(function() {
$scope.$apply(function() {
$scope.records = actionPendingList.rowData;
});
}, 10);