Q:

AngularUI modal to be draggable and resizable

I have an angularUi modal window wrapped in a directive:
html:
<! doctype html>
<html ng-app="plunker">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <script src="main.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div my-modal="{ data: 'test2'}">test2</div>

  </body>
</html>

javascript:
angular.module('plunker', ['ui.bootstrap', 'myModal']);

angular.module("myModal", []).directive("myModal", function ($modal) {
    "use strict";
    return {
      template: '<div ng-click="clickMe(rowData)" ng-transclude></div>',
      replace: true,
      transclude: true,
      scope: {
        rowData: '&myModal' 
      },
      link: function (scope, element, attrs) {
        scope.clickMe = function () {
            $modal.open({
            template: "<div>Created By:" + scope.rowData().data + "</div>"
                        + "<div class=\"modal-footer\">"
                        + "<button class=\"btn btn-primary\" ng-click=\"ok()\">OK</button>"
                        + "<button class=\"btn btn-warning\" ng-click=\"cancel()\">Cancel</button>"
                        + "</div>",
            controller: function ($scope, $modalInstance) {
                $scope.ok = function () {
                    $modalInstance.close({ test: "test"});
                };

                $scope.cancel = function () {
                    $modalInstance.dismiss('cancel');
                };
            }
        });
        }
      }
    };
});

plunker: http://plnkr.co/edit/yzxtWwZQdq94Tagdiswa?p=preview
I want to make the modal draggable and resizable.  I searched through the internet and was able to find the following solution for implementing draggable: 
http://plnkr.co/edit/jHS4SJ?p=preview
This is the important part:
app.directive('dragable', function(){   
  return {
    restrict: 'A',
    link : function(scope,elem,attr){
      $(elem).draggable();
    }
  }  
});

but was not able to make it work with my example.  Can someone help me with this?  I wonder is it possible to use jqueryui modal wrapped in a directive (instead of bootstrap) ?  I am not very good at javascript and will be very greatefull for any working example with both options.  Thanks
EDIT:
I added jqueryui reference and managed to make the modal draggable by adding this line:
 $(".modal-dialog").draggable();

The problem is that I am not sure when to add this line.  In the moment I have added this in the cancel method (just to make it work):
$scope.cancel = function () {
                      $(".modal-dialog").draggable();
                };
So when the modal is opened I need to call cancel and only then the modal is draggable.  If I call it earlier the .modal-dialog does not yer exist.  Suggestions?  
updated plunker:
http://plnkr.co/edit/yzxtWwZQdq94Tagdiswa?p=preview
I am missing something little, can someome provide working example ? 

A:

I've created a native directive to make the modal draggable.  You only need AngularJs and jQuery.  The Directive uses the "modal-dialog" class from Ui-Bootstrap modal and you can only move the modal in the header. 
.directive('modalDialog', function(){
  return {
    restrict: 'AC',
    link: function($scope, element) {
        var draggableStr = "draggableModal";
        var header = $(".modal-header", element);

        header.on('mousedown', (mouseDownEvent) => {
          var modalDialog = element;
          var offset = header.offset();

          modalDialog.addClass(draggableStr).parents().on('mousemove', (mouseMoveEvent) => {
                $("."  + draggableStr, modalDialog.parents()).offset({
                    top: mouseMoveEvent.pageY - (mouseDownEvent.pageY - offset.top),
                    left: mouseMoveEvent.pageX - (mouseDownEvent.pageX - offset.left)
                });
            }).on('mouseup', () => {
                 modalDialog.removeClass(draggableStr);
            });
        });    
     }
  }  
});

A:

If you don't want to modify built-in templates you can write a directive that targets modalWindow:
.directive('modalWindow', function(){
    return {
      restrict: 'EA',
      link: function(scope, element) {
        element.draggable();
      }
    }  
  });

Please note that you will have to load both jQuery and jQuery UI before AngularJS scripts. 
NOTE: Also keep in mind that newer versions of Angular UI bootstrap have been prefixed with "uib" so "modalWindow" becomes "uibModalWindow" with thanks to @valepu

A:

I combined the two above answers and made my modal dragable. 
.directive('modalWindow', function(){
  return {
    restrict: 'EA',
    link: function(scope, element) {
      $(".modal-dialog").draggable();
    }
  }  
});

