bootstrap 3 datetimepicker directive

directives.js

'use strict'

angular.module('directives', [])

    .directive('dateTimePicker', function() {
        return {
            restrict: 'E',
            require: ['ngModel'],
            scope: {
                ngModel: '='
            },
            replace: true,
            template:
                '<div class="form-group">' +
                    '<label for="formLeadDate" class="control-label">Date</label>' +
                    '<div class="input-group">' +
                        '<input type="text" id="formLeadDate" class="form-control" ngModel>' +
                        '<span class="input-group-addon"><i class="icon-calendar"></i></span>' +
                    '</div>' +
                '</div>',
            link: function(scope, element, attrs) {
                var input = element.find('input');
                input.datetimepicker({
                    format: "yyyy/mm/dd hh:ii",
                    showMeridian: false,
                    autoclose: true,
                    todayBtn: true,
                    todayHighlight: true,
                    endDate: new Date()
                });

                element.bind('blur keyup change', function() {
                    scope.ngModel = input.val();
                    console.info('date-time-picker event', input.val(), scope.ngModel);
                });
            }
        }
    });

<date-time-picker ng-model="leadNew.date"></date-time-picker>

Should be:

input.bind('blur keyup change click', function() {

insted of

element.bind

Also i think that after scope.ngModel = input.val(); must be scope.$apply();