Angular Erases Invalid Content From Input Inside Directive

I have directive where I'm dynamically adding other directives and attributes: app.directive('lrDatetime', function ($compile) { return { restrict: 'AE', require: ['ngModel'],

Solution 1:

Found the solution - ngModel attribute should be added manually in link function before $compile:

app.directive('lrDatetime', function($compile) {
    return {
      restrict: 'AE',
      require: ["ngModel", "^form"],
      scope: {
        ngModel: "=",
        item: "=",
        required: "=",
        name: "@"
      },
      templateUrl: "template.html",
      link: function(scope, element, attrs, controllers) { 
        scope.itemForm = controllers[1];

        scope.opened = false;
        scope.open = function($event, obj, which) { 
            scope.opened = true;
        };

        scope.format= "dd.MM.yyyy"; 

        var datepicker = element.find("input");

        if (scope.required === true) {
            datepicker.attr("ng-required", "true");
        }

        datepicker.attr("name", scope.name);
        datepicker.attr("ng-model", "ngModel");
        datepicker.attr("uib-datepicker-popup", scope.format);

        $compile(element.contents())(scope);

     }
  };
});

template:

<input type="text"class="lr-datepicker" 
is-open="opened"  
datepicker-append-to-body="true" />    
<spanclass="input-group-btn"><buttontype="button"class="btn btn-default"ng-click="open($event, item, 'isOpened')">
        Open
    </button></span><spanng-if="itemForm[name].$error.required">required!</span>

Plunker

Think the issue pops up because template gets compiled twice and model gets rerebinded.