AngularJS - Simple Directive Use

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">
<script src="https://rawgithub.com/eternicode/bootstrap-datepicker/master/js/bootstrap-datepicker.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app="myApp" ng-controller="Ctrl">
    <div class="input-append">
        <input type="text" b-datepicker ng-model="date" />
        <button type="button" class="btn" data-toggle="datepicker"> <i class="icon-calendar"></i>
        </button>
    </div>
</div>

JavaScript

angular.module('myApp', [])
    .controller('Ctrl', ['$scope', function ($scope) {

}])
    .directive('bDatepicker', function () {
    return {
        restrict: 'A',
        link: function (scope, el, attr) {
            el.datepicker({});
            var component = el.siblings('[data-toggle="datepicker"]');
            if (component.length) {
                component.on('click', function () {
                    el.trigger('focus');
                });
            }
        }
    };
});