md-max date working but getting this angular error as soon as I am setting md-max-date

Question

I am trying to set a max date of today like this:

My controller:

vm.maxDate= maxDate;
function maxDate() {
    return new Date((new Date()).getFullYear(), (new Date()).getMonth(), (new Date()).getDate());
}

My HTML:

<md-datepicker
             md-placeholder="Date of Creation"
             md-max-date="myCtrl.maxDate()"
             ng-model="myCtrl.form.startDate">
</md-datepicker>

It is working as expected and user is not able to select anything after maxDate. But as soon as I write md-max-date="myCtrl.maxDate()" in my html, I get this angular error. I don't know why this is happening. Any help will be appreciated. Thanks

This is the link to the error Link To Error

This is the error:

Error: $rootScope:infdig Infinite $digest Loop

10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: [[{"msg":"fn: function (c,e,f,g){f=d&&g?g[0]:a(c,e,f,g);return b(f,c,e)}","newVal":"2017-06-18T04:00:00.000Z","oldVal":"2017-06-18T04:00:00.000Z"}],[{"msg":"fn: function (c,e,f,g){f=d&&g?g[0]:a(c,e,f,g);return b(f,c,e)}","newVal":"2017-06-18T04:00:00.000Z","oldVal":"2017-06-18T04:00:00.000Z"}],[{"msg":"fn: function (c,e,f,g){f=d&&g?g[0]:a(c,e,f,g);return b(f,c,e)}","newVal":"2017-06-18T04:00:00.000Z","oldVal":"2017-06-18T04:00:00.000Z"}],[{"msg":"fn: function (c,e,f,g){f=d&&g?g[0]:a(c,e,f,g);return b(f,c,e)}","newVal":"2017-06-18T04:00:00.000Z","oldVal":"2017-06-18T04:00:00.000Z"}],[{"msg":"fn: function (c,e,f,g){f=d&&g?g[0]:a(c,e,f,g);return b(f,c,e)}","newVal":"2017-06-18T04:00:00.000Z","oldVal":"2017-06-18T04:00:00.000Z"}]]

georgeawg georgeawg · Accepted Answer · 2017-06-18T17:35:12

Change the controller to initialize the max date:

vm.maxDate= initMaxDate();
function initMaxDate() {
    return new Date((new Date()).getFullYear(), (new Date()).getMonth(), (new Date()).getDate());
}

HTML

<md-datepicker
     md-placeholder="Date of Creation"
     md-max-date="myCtrl.maxDate ̶(̶)̶ "
     ng-model="myCtrl.form.startDate">
</md-datepicker>

When an AngularJS template contains an AngularJS expression with a function, the framework execute the function multiple times until the expression stabilizes. Since the function returns a new Date object each time, the scope variable never stabilizes, resulting in an $rootScope:infdig error

AngularJS separates an app into Model, View, and Controller. The controller creates and modifies the model, the template renders the view according to the model. The template should never create the model. It should only render the view according to the model and furnish events to the controller for modification of the model.

md-max date working but getting this angular error as soon as I am setting md-max-date

2 Answers