title: drag and drop directive with jqueryUI angularJS
body: <p>I have a problem doing this with angular:</p>
  
  <p><a href="http://jsfiddle.net/EpxHE/14/light/" rel="nofollow">http://jsfiddle.net/EpxHE/14/light/</a></p>
  
  <p>This is what I made:</p>
  
  <p>Directive:</p>
  
  <pre><code>.directive("myDirective", function () {
          return {
              restrict: "A",
              replace: true,
              compile: function (element, attrs) {
                  var $newDiv = $("&lt;div class='dragdiv'&gt;4&lt;/div&gt;");
                  makeElementAsDragAndDrop($newDiv);
                  element.html($newDiv);
              }
          }
  
      })
  
  function makeElementAsDragAndDrop(elem) {
      $(elem).draggable({
          snap: '#droppable',
          snapMode: 'outer',
          revert: "invalid",
          cursor: "move",
          helper: "clone"
      });
      $(elem).droppable({
          drop: function(event, ui) {
              var $dragElem = $(ui.draggable).clone().replaceAll(this);
              $(this).replaceAll(ui.draggable);
              makeElementAsDragAndDrop(this);
              makeElementAsDragAndDrop($dragElem);
          }
      });
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div my-directive ng-repeat="item in items"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I think the problem is because the makeElementAsDragAndDrop() function is call only once and before the element is created. Do you have a solution ? Thanks</p>