I have directive where I’m dynamically adding other directives and attributes:

app.directive('lrDatetime', function ($compile) {
return {
  restrict: 'AE',
  require: ["ngModel"],
  scope: {
    ngModel: "=",
    item: "="
  templateUrl: "template.html",
  compile: function compile(element, attrs) {
    var datepicker = element.find(".lr-datepicker");

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

    return {
        pre: function preLink(scope, iElement, iAttrs, controller) { },
        post: function postLink(scope, iElement, iAttrs, controllers) {
  controller: function ($scope) {
    $scope.opened = false;
      $scope.open = function ($event, obj, which) {
          $scope.opened = true;

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


And template:

<input type="text" 
ng-model="ngModel" />
<span class="input-group-btn">
    <button type="button" class="btn btn-default" 
    ng-click="open($event, item, 'isOpened')">

Now when I have value binded and trying to type something into input it gets erased. I know that if model is invalid angular sets it to “undefined”, but if I would do the same outside the directive it keeps the content of the input.

And if I will just move those attributes to template and delete call to $compile – everything work as expected. But huge minus of such approach is that I cannot control attribute appearance, it always will be rendered.

What am I missing?