Angular Material DatePicker and NG-CHANGE - angularjs

Question

When a user selects a date on the md-datepicker component, I need to call the server to check the schedule for the selected date. The thing is, I can't get my function to fire using ng-change, which seems to be the only option on doing this. Any thoughts on why this is not working?
form.html
<div
layout-padding>
<form
name="form"
novalidate
ng-submit="form.$valid && save()">
<div
layout>
<md-input-container
class="md-block"
flex="100">
<label>Nome Completo</label>
<input
name="fullName"
ng-model="costumer.fullName"
required
disabled/>
<div
ng-messages="form.fullName.$error">
<div ng-message="required">O cliente não foi específicado</div>
</div>
</md-input-container>
</div>
<div
layout>
<md-input-container
flex>
<label>Data</label>
<md-datepicker
name="date"
ng-model="appointment.when"
md-open-on-focus
md-min-date="today">
</md-datepicker>
<div
ng-messages="form.date.$error">
<div ng-message="valid">Data inválida</div>
<div ng-message="mindate">Data anterior à atual</div>
</div>
</md-input-container>
<md-input-container
flex="50">
<label>Horário</label>
<md-select
name="whatTime"
ng-model="appointment.whatTime"
required>
<md-option value="0">08:00 - 09:00</md-option>
<md-option value="1">09:00 - 10:00</md-option>
<md-option value="2">10:00 - 11:00</md-option>
<md-option value="3">13:00 - 14:00</md-option>
<md-option value="4">14:00 - 15:00</md-option>
<md-option value="5">15:00 - 16:00</md-option>
<md-option value="6">16:00 - 17:00</md-option>
<md-option value="7">17:00 - 18:00</md-option>
</md-select>
<div
ng-messages="form.whatTime.$error">
<div
ng-message="required">Selecione um horário</div>
</div>
</md-input-container>
</div>
<md-button
type="submit">Confirmar</md-button>
</form>
</div>
controller.js
angular.module('Application').controller('NewAppointmentController',
['$scope', '$routeParams', 'CostumerService', 'AppointmentService',
function($scope, $routeParams, CostumerService, AppointmentService) {
console.log('NewAppointmentController init');
console.log('Costumer: ' + $routeParams.costumerId);
$scope.today = new Date();
$scope.appointment = {};
$scope.appointment.when = $scope.today;
$scope.save = save;
$scope.checkSchedule = checkSchedule;
CostumerService.getUniqueById($routeParams.costumerId)
.then(function(data){
$scope.costumer = data;
console.log('Costumer name: ' + data.fullName);
}, function(error){
console.log('Erro');
});
function save() {
console.log('Clicked');
$scope.appointment.costumer = $scope.costumer;
AppointmentService.save($scope.appointment)
.then(function(data) {
console.log('Saved');
}, function(error){
console.log('Error');
});
}
function checkSchedule() {
console.log('Changed: ');
}
}]);

Answer 1

It seems to work for me. See this CodePen, ngChange with Datepicker. I added
<md-datepicker
name="date"
ng-model="appointment.when"
ng-change="checkSchedule()"
md-open-on-focus
md-min-date="today">
</md-datepicker>
Everytime you change the date, it will be logged to the console. Although, it really seems like you should be using $asyncValidators as described in Custom Validation.