Draggable Resizeable

HTML

<div ng-controller="DemoCtrl">
  <button ng-click="m()">
moot
</button>
  <input ng-model="moot" />
  <div fc-window="options">tt: <input ng-model="moot" /> <br>
    <button ng-click="m()">
moot
</button><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

SCSS

div[fc-window] {
    position: absolute;
    top:100px;
    left:200px;
    width: 300px;
    overflow: hidden;
    border-radius: 10px;
}

JavaScript

function DemoCtrl($scope) {
  'use strict';
  $scope.options = {
    headerHeight: '20',
    headerColor: 'green',
    borderStyle: '1px solid',
    containerSelector: 'body',
    cornerColor: 'blue',
    cornerSize: '20'
  };

  $scope.moot = "moot";

  $scope.m = function() {
    $scope.moot = "no"
  };
  $scope.min = function() {
    $scope.moot = "min"
  };
}

angular.module('fcWindow.directive', []).directive('fcWindow', ['$document', function($document) {
  'use strict';
  var HEADER_CLASS = '_header-a8fe';
  var CORNER_CLASS = '_corner-3cf7';
  return {
    scope: {
      'fcWindow': '='
    },
    compile: function(element, attr) {

      appendExtraElements();

      function appendExtraElements() {
        element.append('<div class="mootHeader ' + HEADER_CLASS + '"><button ng-click="min()">min</button>{{moot}}</div>');
        element.append('<div class="' + CORNER_CLASS + '"></div>');
      }

      return function(scope, element, attr) {
        var header = angular.element(element[0].querySelector('.' + HEADER_CLASS));
        var corner = angular.element(element[0].querySelector('.' + CORNER_CLASS));
        var options = scope.fcWindow;

        applyStyles(options);

        var rect = getOffsetRect(document.body, element[0]);
        var startX = 0,
          startY = 0,
          x = rect.left,
          y = rect.top,
          startHeight = 0,
          startWidth = 0,
          height = element.prop('offsetHeight'),
          width = element.prop('offsetWidth');

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

        corner[0].addEventListener('mousedown', function(event) {
          // Prevent default dragging of selected content
         ...