Attempting reset/clear a selected date from md-datepicker?

Question

I have a search form with md-datepicker's on it. The form having 'Search' and 'Clear' buttons.

If we select any dates from the md-datepicker and click Clear button it will clear selected date as shown below

_Clear function: _

clear = function () {
    let ctrl = this;
    ctrl.searchCriteria.begindate = null;
    ctrl.searchCriteria.enddate = null;
}

html:

<md-datepicker flex ng-model="sCtrl.searchCriteria.begindate" md-placeholder="Begin Date"></md-datepicker>
<md-datepicker flex ng-model="sCtrl.searchCriteria.enddate" md-placeholder="End Date"></md-datepicker>
<md-button class="md-primary ng-scope md-default-theme md-ink-ripple" ng-click="sCtrl.clear()">Clear</md-button>

If I enter an invalid date manually(ex:786/786/786) and hit the Clear button on the form it won't clear the dates from the respective fields.

I have googled a lot on this issue, but couldn't find a proper solution on this issue. Any help would really be appreciated.