Extending built-in directives

HTML

<script src="http://code.angularjs.org/1.1.1/angular.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<div ng-app='myApp'>
    <div ng-controller="controller">
        <input class="wrapForm" required max-length='5' model='text' placeholder='text' name='text' />
    </div>
</div>

JavaScript

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

myApp.directive('wrapForm', function(){
    return {
        restrict: 'AC',
        link: function(scope, inputElement, attributes){                       
            var overallWrap = angular.element('<div />');
            var validation = angular.element('<div />').appendTo(overallWrap);
            var button = angular.element('<div />').appendTo(overallWrap);
            var inputWrap = angular.element('<div />').appendTo(overallWrap);
            
            overallWrap.insertBefore(inputElement);
            inputElement.appendTo(inputWrap);
            
            inputElement.on('keyup', function(){
                if (inputElement.val()) {
                    validation.text('Just empty fields are valid!');
                } else {
                    validation.text('');
                }
            });            
        }
    }
});

myApp.controller('controller', function ($scope) {    
    
});