AngularUI modal to be draggable and resizable

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);            });        });         }  }  });

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

I combined the two above answers and made my modal dragable.

.directive('modalWindow', function(){  return {    restrict: 'EA',    link: function(scope, element) {      $(".modal-dialog").draggable();    }  }  });