JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/1.0.3/angular.min.js"></script>
<script src="http://code.angularjs.org/1.0.3/angular-bootstrap.min.js"></script>
<span>A datepicker!<span>
    <datepicker ng-model="foo" ></datepicker>
    <span>A textbox bound to the same value!</span>
    <input ng-model="foo" />

JavaScript

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

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

angular.bootstrap(document,['testapp']);