javascript - ng-pattern がディレクティブ内で機能しない

Question

<input>日付の検証を処理し、文字列から実際のオブジェクトに変換し、元のスコープでバージョンDateを維持できるように、ディレクティブでラップしようとしています。Dateこの相互作用は期待どおりに機能しています。しかし、ng-pattern要素の<input>は正しく動作していません。入力内容に関係なく、が無効になることはありません<input>。

HTML

<pl-date date="date"></pl-date>

JS

.directive("plDate", function (dateFilter) {
  return {
    restrict: 'E',
    replace: true,
    template: '<input id="birthDateDir" name="birthDate" type="text" ng-pattern="{{getDatePattern()}}" ng-model="dateInput">',
    scope: {
        date: '='
    },
    link: function (scope) {
        scope.dateInput = dateFilter(scope.date, 'MM/dd/yyyy');

        scope.$watch('date', function (newVal) {
            if (newVal !== scope.tmp) {
                if (!newVal) {
                    scope.dateInput = null;
                } else {
                    scope.dateInput = dateFilter(scope.date, 'MM/dd/yyyy');
                }
            }
        });

        scope.getDatePattern = function () {
            var exp = '/';

            // Removed for brevity

            exp += '/';

            return exp;
        };

        scope.$watch('dateInput', function (newVal) {
            if (newVal !== null) {
                scope.date = new Date(newVal);
                scope.tmp = scope.date;
            }
        });
    }
};

JSFiddle はこちら: https://jsfiddle.net/e5qu5rgy/1/

どんな助けでも大歓迎です！