ng-model не работает после $ (element) .clone()

Question

У меня есть директива, которая клонирует объект при перетаскивании.

app.directive('ironplayDraggableBox', ['$compile', function($compile) { 
    return { 
    restrict:'A', 
    link: function(scope, element, attrs) { 
     $(element).draggable({ 
     connectToSortable: ".preview", 
     helper: function(){ 
      $new_el = $(this).clone(); 
      return $compile($new_el)(scope); 
     }, 
     handle: ".drag", 
     }); 
    } 
    }; 
}]); 

Но когда я перетащить элемент DOM с HTML кодом, как этот

<input type="text" ng-model="align">{{align}} 

ng-model прекращает работу полностью.

Не могли бы вы предложить, как реализовать правильный клоун элемента dom с угловыми директивами внутри?

Вот полный код: http://plnkr.co/edit/OJ1a5VyqQq9EpXP7AfpA?p=preview Цель в плункере, чтобы текст выравнивался, выберите работу.

Answer 1

Проблема заключается в том, что ваш хелпер-клон не тот, который помещается в HTML в конце. Вы можете взять последний элемент из stop события Сортируемого элемента, и скомпилировать его (вам нужно вводить $ компилировать в эту директиву):

stop: function(e, ui) { 
    $compile(ui.item)(scope); 
} 

Для того, чтобы модели вступили в силу необходимо также изменить h3 из класса в нг-класс

<h3 ng-class="align" contenteditable="true">Hello</h3> 

заметить Также вы можете создать свой перемещаемый элемент с новой областью, так что каждый из них будут иметь другое состояние.

Проверьте это plunker.