Endless loop when assing onPaginate function to the md-on-paginate attribute

[kvent]

Hello to everyone. As the title says I am facing an issue with the md-on-paginate attribute. I am fairly new with angular so I don't clearly understand what is going wrong.

Here is my code:

(function() {

    'use strict';

    angular.module('representatives.module')
        .controller('representativesController', representativesController);

    /* @ngInject */

    function representativesController($resource) {

        var vm = this;
        vm.onPaginate = onPaginate;        
        vm.getRepresentatives = getRepresentatives;
        vm.checked = false;
        vm.results = [];
        vm.progress = undefined;
        vm.filterVisibility = false;

        vm.filters = {
            search: '',
            limit: '10',
            order: '-id',
            page: 1,
            dateFrom: '',
            dateTo: ''
        };

        var Representatives = $resource('http://localhost/brb.rebates/api/v1/representatives');

        function getRepresentatives(filters) {
            vm.promise = Representatives.get(filters || vm.filters, success).$promise;
        }

        function success(representatives) {
            vm.representatives = representatives;
        }

       function onPaginate(page, limit) {
            getRepresentatives(angular.extend({}, vm.filters, {
                page: page,
                limit: limit
            }));
        }
    }

})();

//=================================================================

<md-table-pagination md-limit="vm.filters.limit" md-page="vm.filters.page" md-total="{{vm.results.Data.Criteria.TotalItems}}"
        md-on-paginate="vm.onPaginate()" md-page-select></md-table-pagination>

And I get multiple errors:

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.4.8/$rootScope/infdig?p0=10&p1=%5B%5D
    at vendor.js:31
    at h.$digest (vendor.js:33)
    at h.$apply (vendor.js:33)
    at HTMLButtonElement.<anonymous> (vendor.js:35)
    at HTMLButtonElement.J.event.dispatch (vendor.js:25)
    at HTMLButtonElement.g.handle (vendor.js:24)

Any suggestions?

Thank you in advance.

[daniel-nagy]

Remove the parentheses.

md-on-paginate="vm.onPaginate"

Explanation

I'm using two-way data binding for the callback functions,

onPaginate: '=?mdOnPaginate'

So you're essentially passing the function to the directive. The way you had it, the result of executing your function was passed to the directive, I think.

[kvent]

Thank you very much Daniel! It works!

[neslinesli93]

Having the same trouble as @kvent ... If I remove parenthesis from md-on-paginate, nothing is called at all. If I put the parenthesis, it gets stuck into an infinite digest loop. I am using ES6 and declaring controllers, services etc as classes

[ghost]

I am having the same problem. Here is the code <md-table-pagination md-limit="ic.query.limit" md-limit-options="ic.limitOptions" md-page="ic.query.page" md-total="{{ic.fullCount}}" md-page-select="ic.options.pageSelect" md-boundary-links="ic.options.boundaryLinks" md-on-paginate="ic.logPagination()"></md-table-pagination>

This is the controller

logPagination() {
        console.log(this.query);
    }

I can see that when i change the page the above function gets called mulitple times.

[NandiniMGawade]

@daniel-nagy

I have removed parentheses.But still facing same issues.On md paginate method is called twice.