从Angular UI模式拖动到div不工作

Question

In this plunk我有一个带有文本元素的Angular UI模式，我需要将其拖放到模态外部的div中。我正在使用jQuery UI的draggable和droppable函数。这可能吗？

HTML

<script type="text/ng-template" id="myModalContent.html">

    <div class="modal-header">
        <h4 class="modal-title">The Title</h4>
    </div>

    <div id="dragme" style="cursor:default">drag this text</div>

</script>
<br/><br/><br/><br/><br/><br/><br/><br/>
<div id="dropme">Drop here</div>

的Javascript

var app = angular.module('app', ['ui.bootstrap']);
app.controller('ctl', function ($scope,$uibModal) {

      $scope.modalInstance = $uibModal.open({
          templateUrl: 'myModalContent.html',
          backdrop: 'static',
          animation: false,
          windowClass: 'app-modal',
        }); 


      $("#dragme").draggable(); 
      $("#dropme").droppable({  
           drop: alert("dropped!") 
      }); 
});