Angular Material DatePicker and NG-CHANGE

Problem

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: ');
            }

    }]);
Problem courtesy of: Jefferson Tavares

Solution

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.

Solution courtesy of: ppham27

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.