validation - 他のコントロール イベントのモデル変更時にカスタム AngularJS フォームの検証をトリガーする

Question

サンプルの日付範囲検証ディレクティブを作成しました。

開始日が終了日よりも大きい場合、検証エラーをスローする必要があります。開始日テキストボックスの値を更新して開始日の値を変更すると、検証が正しく機能します。しかし、コントローラーイベントを使用して開始日の値を変更すると、検証がトリガーされません。以下の例を確認してください

<div ng-app="myapp">
<div ng-controller="comparectrl">
     <div ng-form="testform">
     <input type="text" id="startdate" name="startdate" ng-model="StartDate" placeholder="StartDate" />
    <input type="text" id="enddate" name="enddate" ng-model="EndDate" compareto="#startdate"  compare placeholder="EndDate" />
    <button ng-click="change()">Change</button>
    <br />
    <span ng-show="testform.enddate.$error.compare" >Please enter proper date.</span>
        </div>
</div>
    </div>

var app = angular.module("myapp", []);
app.directive("compare", function () {
    return {
        restrict: "A",
        require: "ngModel",
        link: function (scope, elem, attrs, ctrl) {
            elem.on("change", function () {
                console.log("end date on change event called");
                scope.$apply(dovalidation);
            });
            angular.element(attrs.compareto).on("change", function () {
                console.log("start date on change event called");
                scope.$apply(dovalidation);
            });
            function dovalidation() {
                var value1 = new Date(angular.element(attrs.compareto).val());
                var value2 = new Date(elem.val());
                if (value1 > value2) {
                    ctrl.$setValidity("compare", false);
                }
                else {
                    ctrl.$setValidity("compare", true);
                }
            }
        }
    };
});
app.controller("comparectrl", function ($scope)
{
    $scope.StartDate = "01/01/2012";
    $scope.EndDate = "01/01/2013";
    $scope.change = function () {
        $scope.StartDate = "01/01/2014";
        angular.element("#startdate").triggerHandler("change");
    }
});