Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
    <form name="form">
        <input type="text" name="input1" ng-model="value1" validation-directive>
    </form>
    <p>value: {{value1}}</p>
</div>

CSS

input {
    margin: 20px;
}
p {
    margin-left: 20px;
}

JavaScript

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

function MyCtrl($scope) {
    $scope.value1 = 'abcdef';
}

myApp.directive("validationDirective", function ($compile) {
    return {
        restrict: 'A',
        link: function (scope, element) {
            element.removeAttr('validation-directive'); // necessary to avoid infinite compile loop
            element.attr("ng-pattern", new RegExp("^[a-z]{0,10}$"));
            $compile(element)(scope);
        }
    };
});