title: Dragging Angular UI modal with title bar
body: <p>In this <a href="http://plnkr.co/edit/M9WNRyeLa5ufzwbmmQpl?p=preview" rel="nofollow">plunk</a> I have an Angular UI Modal with a title bar. The objective is to drag the entire modal by dragging the title bar. Both the title bar and the modal share the (top,left) position, as the modal is a rectangle (I changed the radius to zero), but when I drag the title bar it doesn't work. Any ideas?</p>
  
  <p>HTML</p>
  
  <pre><code>  &lt;body ng-app="app" ng-controller="ctl"&gt;
  
    &lt;script type="text/ng-template" id="myModalContent.html"&gt;
          &lt;div class="topbar"&gt;This is the title&lt;/div&gt;
  
          &lt;div class="modal-header"&gt;
              &lt;h3 class="modal-title" id="modal-title"&gt;I'm a modal!&lt;/h3&gt;
          &lt;/div&gt;
  
  
          &lt;div class="modal-footer"&gt;
              &lt;button class="btn btn-primary" type="button" ng-click="ok()"&gt;OK&lt;/button&gt;
          &lt;/div&gt;
      &lt;/script&gt;
  
      &lt;button type="button" class="btn btn-default" ng-click="open()"&gt;Open me!&lt;/button&gt;
  
     &lt;/body&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>var app = angular.module("app", ['ui.bootstrap']);
  app.controller("ctl", function($scope,$uibModal,$timeout) {
  
  
    var modalInstance;
    $scope.open = function () {
      modalInstance = $uibModal.open({
            animation: false,
            windowClass: 'the-modal',
            templateUrl: 'myModalContent.html'
          });
  
          $timeout(function(){
              $('.topbar').draggable({
                  drag: function( event, ui ) {
                          $( ".modal-content" ).offset({ 
                                          top: ui.position.top,
                                          left: ui.position.left});
                  }   
              });
  
          },10);
  
      };
  
  });
  </code></pre>