AngularJS validation

var app = angular.module('app', []);
 
app.controller('appCtrl', function ($scope) {
 
});
 
 
app.directive('validate', function () {
    return {
        restrict: 'A',
        require: 'ngModel', // require:  '^form',
        link: function (scope, element, attrs, ctrl) {
            var elementErrors = element.next();
            var errorsList = '',
                errorItem;
            var errorMessages = {
                //defaultMsg: 'Please add error message for {0}',
                required: 'This field is required',
                number: 'Please enter a valid number',
                min: 'Please enter the minimum number of {0}',
                max: 'Please enter the maximum number of {0}',
                url: 'Please enter a valid URL in the format of http(s)://wwww.google.com',
                email: 'Please enter a valid email address',
                minlength: 'Please enter at least {0} characters',
                maxlength: 'You have entered more than the maximum {0} characters',
                date: 'Please enter a valid date',
                time: 'Please enter a valid time',
                pattern: 'Please ensure the entered information adheres to this pattern {0}',
                minmodel: 'Should be at least as big as {0}',
                positiveInteger: 'Please enter positive integer number'
            };
            element.bind('keyup', function () {
                console.log('======================');
                console.log(scope);
                console.log(element);
                console.log(attrs);
                console.log(ctrl);
                console.log('------------------------');
                if (ctrl.$dirty && ctrl.$invalid) {
                    errorsList = '';
                    angular.forEach(ctrl.$error, function (value, key) {
                        if (value && errorMessages[key]) { // show only truthy errors
                            errorItem = errorMessages[key];
                            errorItem = errorItem.replace(/\{0\}/g, attrs[key]);
                            errorsList = errorsList + '<li>' + key + ' == ' + errorItem + '</li>';
                        }
                    });
                    elementErrors.html('<ul>' + errorsList + '</ul>')
                    elementErrors.show();
                } else {
                    elementErrors.hide();
                    elementErrors.html('');
                }
            })
        }
    };
});
 
 
app.directive('positiveInteger', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ctrl) {
            ctrl.$parsers.unshift(function (viewValue) {
                var INTEGER_REGEXP = /^\d+$/;
                if (INTEGER_REGEXP.test(viewValue)) { // it is valid
                    ctrl.$setValidity('positiveInteger', true);
                    return viewValue;
                } else { // it is invalid, return undefined (no model update)
                    ctrl.$setValidity('positiveInteger', false);
                    return undefined;
                }
            });
        }
    };
});
 
 
app.directive('positiveFloat', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ctrl) {
            ctrl.$parsers.unshift(function (viewValue) {
                var FLOAT_REGEXP = /^(?:[1-9]\d*|0)?(?:\.\d+)?$/;
                if (FLOAT_REGEXP.test(viewValue)) { // it is valid
                    ctrl.$setValidity('positiveInteger', true);
                    return viewValue;
                } else { // it is invalid, return undefined (no model update)
                    ctrl.$setValidity('positiveInteger', false);
                    return undefined;
                }
            });
        }
    };
});
 
app.directive('minModel', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ctrl) {
            ctrl.$parsers.unshift(function (viewValue) {
                if (viewValue > scope[attrs.minModel]) { // it is valid
                    ctrl.$setValidity('minModel', true);
                    return viewValue;
                } else { // it is invalid, return undefined (no model update)
                    ctrl.$setValidity('minModel', false);
                    return undefined;
                }
            });
 
        }
    };
});

<section ng-app="app">
    <article ng-controller="appCtrl" class="container">
        <form class="form-horizontal well" name="form" novalidate>
            <div class="form-group">
                <label class="col-sm-6 control-label">Number; min="5" max="500"</label>
                <div class="col-sm-6">
                    <input type="number" min="5" max="500" ng-model="number" name="number" class="form-control" positive-integer validate required />
                    <div class="form-errors">form-errors</div>
                </div>{{ form.number.$error }}</div>
            <div class="form-group">
                <label class="col-sm-6 control-label">Number2 - should be greater than MinNumber; min="5" max="500"</label>
                <div class="col-sm-6">
                    <input type="number" min="5" max="500" ng-model="number2" name="number2" class="form-control" min-model="minnumber" min-model-name="Min Number" positive-integer validate required />
                    <div class="form-errors">form-errors</div>
                </div>{{ form.number2.$error }}</div>
            <div class="form-group">
                <label class="col-sm-6 control-label">MinNumber; positive float</label>
                <div class="col-sm-6">
                    <input type="number" ng-model="minnumber" name="minnumber" class="form-control" positive-float validate required />
                    <div class="form-errors">form-errors</div>
                </div>{{ form.minnumber.$error }}</div>
            <div class="form-group">
                <label class="col-sm-6 control-label">Email - minlength="5", maxlength="15"</label>
                <div class="col-sm-6">
                    <input type="email" ng-minlength="5" ng-maxlength="15" ng-model="email" name="email" class="form-control" validate required />
                    <form-errors></form-errors>
                </div>{{ form.email.$error }}</div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-6">
                    <button ng-click="submit()" ng-disabled="form.$invalid" class="btn btn-primary">submit</button>
                </div>
            </div>
        </form>
    </article>
</section>

input.ng-invalid.ng-dirty {
    border-color: red;
    color: red;
}
input.ng-valid.ng-dirty {
    border-color: green;
    color: green;
}
.form-errors {
    border: 1px solid red;
    display: none;
}