How to update Angular-footable values when rest calls are made?

Question

On the ng-init of my controller, I grab all the data that I want to show on my table through a rest call. Below follows the code:

tableService.getList(function(response) {
                    $scope.back = response
                    blockUI.start("Wait...");
                    $timeout(function() {
                        $scope.response = $scope.back;
                        blockUI.stop();
                    }, 100);
                });

This code works like a charm. The $timeout function is there because angular-footable does not work well with ng-repeat, so I had to put a timeout before rendering the data.

So, the user will have a field to filter the data of the table. So when the user clicks on the button 'Filter' a request will be made to the server, and the data of the table will have to be updated. So, another request is made:

    tableService.getListWithParameters(params,function(response) {
                    $scope.back = response
                    blockUI.start("Wait...");
                    $timeout(function() {
                        $scope.response = $scope.back;
                        blockUI.stop();
                    }, 100);
                });

However, the table does not modify, even if the response got different. I have already tried to call the function to redraw the table:

$('.table').trigger('footable_redraw');

But nothing happened. Does anyone knows what should be done for angular-footable update the data inside the table, when rest calls are being made?

Answer 1

Instead of:

$('.table').trigger('footable_redraw');

use:

$timeout(function(){
    $('.table').trigger('footable_redraw');
}, 100);