Ion-datetime - How to pick time between a specific range?

I am using ion-datetime to pickup time between two range. I have tried to used [max] and [min] attributes but it didn’t work out and I have settled for a solution with [hourValues]

This is the code in my HTML file
<ion-datetime displayFormat="HH:mm" [hourValues]="hourValues" [(ngModel)]="pickUpTime"></ion-datetime>

And the code in TS file

    minTime: string = "2016-12-14T11:30:51.620Z";
    maxTime: string = "2016-12-14T14:30:51.620Z";

    ngDoCheck() {

        if(this.pickUpTime > this.maxTime) {
            this.pickUpTime = this.maxTime;
        } else if (this.pickUpTime < this.minTime) {
            this.pickUpTime = this.minTime;
        }

        console.log("this.pickUpTime", this.pickUpTime);
    }

The issue I’m having is that console.log() shows the correct value for pickUpTime but that is not reflected in the view. For instance, here I choose 11:22 and value was changed with ngDoCheck() but remained at 11:22 in the view.

image

Any idea on how to tackle this?

I tried to used ngZone and change the code in ngDoCheck() but it didn’t work

ngDoCheck() {
        this.zone.run(() => { 
                if(this.pickUpTime > this.maxTime) {
                    this.pickUpTime = this.maxTime;
                } else if (this.pickUpTime < this.minTime) {
                    this.pickUpTime = this.minTime;
                }
        });
        console.log("this.pickUpTime", this.pickUpTime);
    }