Making angular-ui bootstrap modal moveable

moveable-modal.js

'use strict';

/**
 * Moveable modal
 *
 * You need to set the options of the provider.
 *
 * Requirements:
 *
 *    You need angular-ui/bootstrap module
 *
 * Usage:
 *
 *    var mymodule = angular.module('mymodule', [
 *      'moveable-modal'
 *    ]);
 *
 *    mymodule.config(['moveableModalProvider', function (moveableModal) {
 *      moveableModal.options = {
 *        elSelector: '.modal-header',      // selector to select/click
 *        targetSelector: '.modal-content'  // selector to be moved
 *      };
 *    }])
 */

angular.module('moveable-modal', [
  'ui.bootstrap.modal'
])

.provider('moveableModal', ['$provide', function ($provide) {

  var moveableModal = {
    options: {
      elSelector: '',
      targetSelector: ''
    },
    $get: function () {
      var startX = 0;
      var startY = 0;
      var x = 0;
      var y = 0;

      if (!moveableModal.options.elSelector &&
        !moveableModal.options.targetSelector) {
        return;
      }

      var $document = angular.element(document);
      var element = angular.element(moveableModal.options.elSelector);
      var target = angular.element(moveableModal.options.targetSelector);

      function mousemove (event) {
        y = event.pageY - startY;
        x = event.pageX - startX;
        target.css({
          top: y + 'px',
          left:  x + 'px'
        });
      }

      function mouseup () {
        $document.unbind('mousemove', mousemove);
        $document.unbind('mouseup', mouseup);
      }

      element.css({
        position: 'relative',
        cursor: 'move'
      });

      element.on('mousedown', function (event) {
        // Prevent default dragging of selected content
        event.preventDefault();
        startX = event.pageX - x;
        startY = event.pageY - y;
        $document.on('mousemove', mousemove);
        $document.on('mouseup', mouseup);
      });
    }
  };

  $provide.decorator('$modal', ['$delegate', function ($delegate) {
    var $modal = angular.copy($delegate);

    $delegate.open = function (options) {
      var instance = $modal.open(options);
      instance.opened.then(function () {
        setTimeout(function () {
          moveableModal.$get();
        }, 100);
      });
      return instance;
    };

    return $delegate;
  }]);

  return moveableModal;
}]);

Hai, i also try this same code for my project but have some issue while draggaing
My header gets lock some limit ....

While dragging is possible for with in the grid limit ,not to exceed that limit
Is it possible? what are the possibles??