Model is not updating after select a date

Question

The following code work with pure angularjs correct, but when I integrate it to a Mobile Angular UI App it does not update the model after selecting a date. If I edit the input field without the date picker it works fine.

Template:

<div>
<label>{{myLabel}}:</label>
<input class="form-control datetime-picker" placeholder="{{myPlaceholder}}" ng-model="ngModel" required="required">
</div>

Directive js code:

(function(){
    var app = angular.module('MeetingApp.directives.HelpDirective', []);

    app.directive("datetimePicker", function() {
        return {
            restrict: 'E',
            templateUrl: "datetime-picker.html",
            scope: {
                ngModel: '=',
                myPlaceholder: '@',
                myLabel: '@'
            },
            require: ['?^ngModel'],
            link: function(scope, element, attrs, ngModelCtrl) {
                $(element).find('.datetime-picker').datetimepicker({
                    format: "dd.mm.yyyy hh:ii",
                    autoclose: true,
                    language: "de",
                    startDate: new Date(),
                    minuteStep: 10
                });
            }
        };
    });
})();

Usage:

<form method="post" id="meetingForm" ng-controller="MeetingController as meetingCtrl" novalidate>    
    <datetime-picker my-placeholder="Startzeit" my-label="Startzeit" ng-model="meetingCtrl.meeting.start"></datetime-picker>
    <datetime-picker my-placeholder="Endzeit" my-label="Endzeit" ng-model="meetingCtrl.meeting.end"></datetime-picker>
</form>

Github link: https://github.com/knobli/meetingApp

To run the app: npm install -g bower yo gulp generator-mobileangularui bower install gulp build gulp

Answer 1

This require: ['?^ngModel'], looks strange to me... If you require a thing, in my opinion, it can't be optional, right?

Try using require: 'ngModel', and let me know if it works.

You need to use this:

dpElement.on('changeDate', function(ev) {
            //need to run digest cycle for applying bindings
            scope.$apply(function() {
                ngModelCtrl.$setViewValue(ev.date);
            });
        });

But be aware to not call your parameter event. This is a reserved word in JavaScript. Take a look at W3Schools