AngularJS - Directive: template function ex.

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<div data-ng-app="myApp"> <span>A datepicker!</span>

    <datepicker ng-model="foo"></datepicker> 
    <span>A textbox bound to the same value!</span>
    <input ng-model="foo" />
    
</div>

JavaScript

//Include angular-ui dependency in resources on the side and as 'ui'
angular.module('myApp', [])

.directive('datepicker', function () {
    return {
        replace: true,
        require: 'ngModel',
        restrict: 'E',
        template: function (ele, attrs) {            
            var template = '<div class="datepicker-wrapper input-append">' + '<input type="text" class="datepicker" data-ng-model="' + attrs.ngModel + '" />' + '<span class="add-on"><i class="icon-calendar"></i></span>' + '</div>';
            return template;
        }               
    };
});