Why does angularjs Digest go into infinite loop with date getter function

Question

I have a DTO object which has a Date parameter. I am wrapping this Dto in a view model object the properties of which I am then binding in my view to a label.

<label class="form-control">{{controller.ViewModel.Date}}</label>

In the view model I have a getter thus. (I am using TypeScript)

public get Date(): Date {
    return new Date(Date.parse(this.dto.Date));
    //return moment(this.dto.Date).toDate();
}

the emitted JavaScript:

Object.defineProperty(ViewModel.prototype, "Date", {
    get: function () {
        return new Date(Date.parse(this.dto.Date));
    },
    enumerable: true,
    configurable: true
});

I believe that the reason because I am creating a new Date in the getter and angular thinks that this means the dates are always new and it keeps getting the date until the model stabilises, thus causing an infinite loop.

Why is angular doing this?
Why does it keep calling the getter over and over, what is wrong with just calling it once?
Can I tell angular to just call the getter once and accept the value it is given?

Answer 1

If you are on a high enough version, you could try a one time binding. Follow the instructions here: https://docs.angularjs.org/guide/expression#one-time-binding

You are basically right with your assumption that angular thinks the dates are always new. You are changing the value with the evaluation in your getter and angular's dirty checking and watches triggers another digest.

Could you also try parsing the date ahead of time?