jQuery datepicker required validation not working with AngularJS

Question

In my AngularJS app, I have a form with basic input text fields with angular form validations implemented. The submit button is enabled only when the form becomes valid.

I followed this tutorial to implement jQuery datepicker with AngularJS by writing a custom directive.

In my HTML, I've added

<date-time-picker recipient="recipient"></date-time-picker>

and my directive looks like

.directive('dateTimePicker', function() {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      recipient: '='
    },
    template:
      '<div>' +
      '<input type="text" readonly data-date-format="yyyy-mm-dd hh:ii" name="recipientDateTime" data-date-time required>'+
      '</div>',
    link: function(scope, element, attrs, ngModel) {
      var input = element.find('input');


  input.datetimepicker({
    format: "mm/dd/yyyy hh:ii",
    showMeridian: true,
    autoclose: true,
    todayBtn: true,
    todayHighlight: true
  });

  element.bind('blur keyup change', function(){
    scope.recipient.datetime = input.val();
  });
  }
  }
});

The form still shows as dirty after implementing the same. Am I missing something here?

PS: I gave an dummy ng-model within the directive template.

Answer 1

after the

scope.recipient.datetime = input.val()

Try adding in a

Scope.$digest();

Call. This should force the scope to sort itself out.