igDatePickers validation with angular

HTML

<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/extensions/igniteui-angular.js"></script>

<div ng-app="sampleApp" ng-controller="sampleAppCtrl">
  <div>
    <ig-date-picker class="form-control" id="startDate" ng-model="minDate"></ig-date-picker>
  </div>
  <div>
    <ig-date-picker class="form-control" id="endDate" ng-model="input.end">
      <validator-options custom='{{myValidator}}' onchange="true">
      </validator-options>
    </ig-date-picker>
  </div>
</div>

JavaScript

var sampleApp = angular.module('sampleApp', ['igniteui-directives']);
  sampleApp.controller('sampleAppCtrl', function($scope) {
    $scope.minDate = new Date(2017, 0, 1);
    $scope.myValidator = function(value) {
      console.log('called myValidator');
      this.options.errorMessage = "Date must be before " + $scope.minDate.toLocaleDateString();
      return value < $scope.minDate;
    }
  });