JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
    <form name="myForm" novalidate>
        <input type="text" ng-model="model.birthDate" name="birthDate" past-date /><br/>
        <span ng-show="myForm.birthDate.$error.pastDate">The date must be in the Past </span><br/>
        <button ng-disabled="myForm.$invalid" ng-click="save()">Save</button>
        <button ng-click="changeDateProgramatically()">Change date programatically</button>
    </form>
</div>

JavaScript

var myApp = angular.module("myApp", []);

myApp.controller('myController', function($scope) {
    $scope.model = {};
    
    $scope.showAgeValidationMessage = function(field) {
        return field.$dirty && field.$error.min;
    };
    
    $scope.changeDateProgramatically = function() {
        $scope.model.birthDate = '1/1/2014';
    };
});

myApp.directive('pastDate', function() {
    return {
        restrict: 'A',
        require: '?ngModel',
        link: function (scope, element, attrs, ctrl) {
            
            ctrl.$validators.pastDate = function(modelValue){
                var today = new Date();
                today = new Date(today.getFullYear(), today.getMonth(), today.getDate());
                return (new Date(modelValue) < today)
            }

        }
    };
});