Как я могу сделать плавающий MD-диалог?

Question

Я использую md-диалог angular -материала (angularjs), я хочу отобразить его как плавающее и перетаскиваемое окно - без серого фона - я использую его для создания несколько всплывающих окон для общения - например, видеовызов, чат и т. д. c ... чтобы пользователь мог сохранить все модальные windows - но перетащить их туда, где он захочет.

Я нашел здесь некоторые решения, но ни одно из них не работает.

Я пробовал следующие шаги:

 $scope.openVideoCallDialog = function (ev) {
       let dialog = angular.element(document.querySelector('md-dialog'));
       dialog.addClass('md-raised md-accent');
       $mdDialog.show({
          templateUrl: '../../popup-templates/video-call-modal-tpl.html',
          parent: angular.element(document.body),
          clickOutsideToClose: true,
          draggable: true, // added this property - not working
          fullscreen: $scope.customFullscreen
        })
      };
    }
  ]);

Я пытался добавить директиву - как здесь - но я получаю ошибка: TypeError: element.draggable не является функцией

.directive('draggable', function() {
        return {
            // A = attribute, E = Element, C = Class and M = HTML Comment
            restrict: 'A',
                link: function(scope, element, attrs) {
                element.draggable({
                    stop: function(event, ui) {
                        console.log("Check if its printing")
                        event.stopPropagation();
                    }
                });
            }
        };
    });