Clear input fields when checkbox is checked - angularjs

Question

I have a check box and two input fields. Either the check box has to be checked or the two input fields have to be filled in. I'm doing validation using Angular i.e. ng-show, ng-required.
When the checkbox is checked the two input fields are disabled i.e. ng-disabled="$parent.vm.selectAllDates".
Now I also have to clear any data that may have been entered into the textboxes.
The check box is not checked on page load. It is set in the controller like this: vm.selectAllDates = false;
Is there some way to clear the input fields when the check box is checked in Angular?
EDIT
I've added what I tried doing using your example
Check box:
<input name="dateSelectAll" type="checkbox"
ng-model="$parent.vm.selectAllDates"
ng-required="vm.selectedReport.Parameters.StartDate == null && vm.selectedReport.Parameters.EndDate == null" />All Available Dates
Start date input:
<input name="beginningDate" type="text" class="form-control form-field" datepicker-popup="dd-MMM-yyyy"
ng-disabled="$parent.vm.selectAllDates"
ng-model="$parent.vm.selectedReport.Parameters.StartDate"
is-open="beginningDateOpened"
ng-required="$parent.vm.selectAllDates == false"
ng-change="$parent.vm.selectedReport.Parameters.StartDate = $parent.vm.selectAllDates ? '' : $parent.vm.selectedReport.Parameters.StartDate"
close-text="Close" />
End date:
<input name="endDate" type="text" class="form-control form-field" datepicker-popup="dd-MMM-yyyy"
ng-disabled="$parent.vm.selectAllDates"
ng-model="$parent.vm.selectedReport.Parameters.EndDate"
is-open="endDateOpened" ng-change="$parent.vm.selectedReport.Parameters.EndDate = $parent.vm.selectAllDates ? '' : $parent.vm.selectedReport.Parameters.EndDate"
ng-required="$parent.vm.selectAllDates == false && $parent.vm.selectedReport.Parameters.EndDate == null"
close-text="Close" />
One really odd thing was I wanted to see what was happening so I added
{{$parent.vm.selectedReport.Parameters.StartDate = $parent.vm.selectAllDates ? '' : $parent.vm.selectedReport.Parameters.StartDate}}
after the StartDate input field. When I selected a date, the date was added to the input field as well as underneath the input. When I clicked the check box, the date was removed from the input field as well as from under the input field. So it worked! But the minute I removed the above code from under the input field it stopped working...I was like wha?

Answer 1

The simple approach is to use ngChange directive on checkbox and set text input model to empty string if checkbox is checked. Something like this:
<input type="text" ng-model="data.test" ng-disabled="data.check">
<input type="checkbox" ng-model="data.check" value="one"
ng-change="data.test = data.check ? '' : data.test">
Demo: http://plnkr.co/edit/pKGui2LkP487jP0wOfHf?p=preview

Answer 2

I ended up building off of what you showed me #dfsq. Thank you very much for your help!
I ended up creating a function for ng-change and putting it on the check box:
<input name="dateSelectAll" type="checkbox"
ng-model="$parent.vm.selectAllDates"
ng-change="vm.clearFields()"
ng-required="vm.selectedReport.Parameters.StartDate == null && vm.selectedReport.Parameters.EndDate == null" />All Available Dates
Then in my controller I added the code to clear both start and end date input fields:
vm.clearFields = function () {
vm.selectedReport.Parameters.StartDate = vm.selectAllDates ? '' : vm.selectedReport.Parameters.StartDate;
vm.selectedReport.Parameters.EndDate = vm.selectAllDates ? '' : vm.selectedReport.Parameters.EndDate;
}
If there is a better way, please let me know. Thanks again!