AngularJS draggable element (position must be absolute)

draggable.js

/**
 * @see https://github.com/siongui/palidictionary/blob/master/static/js/draggable.js
 * @see http://docs.angularjs.org/guide/compiler 
 */

angular.module('draggableModule', []).
  directive('draggable', ['$document' , function($document) {
    return {
      restrict: 'A',
      link: function(scope, elm, attrs) {
        var startX, startY, initialMouseX, initialMouseY;
        elm.css({position: 'absolute'});
 
        elm.bind('mousedown', function($event) {
          startX = elm.prop('offsetLeft');
          startY = elm.prop('offsetTop');
          initialMouseX = $event.clientX;
          initialMouseY = $event.clientY;
          $document.bind('mousemove', mousemove);
          $document.bind('mouseup', mouseup);
          return false;
        });
 
        function mousemove($event) {
          var dx = $event.clientX - initialMouseX;
          var dy = $event.clientY - initialMouseY;
          elm.css({
            top:  startY + dy + 'px',
            left: startX + dx + 'px'
          });
          return false;
        }
 
        function mouseup() {
          $document.unbind('mousemove', mousemove);
          $document.unbind('mouseup', mouseup);
        }
      }
    };
  }]);

openSelectController.js

$openSelect = function() {
    var event = new MouseEvent('mousedown');
    var menu = document.getElementById("selectUnits");
    menu.dispatchEvent(event);
}

select.html

<select id="selectUnits" ng-model="units" ng-click="openSelect()">
  <option value="mile">Miles</option>
  option value="kilometer">Kilometers</option>
</select>

Quick Note: buttons on draggable divs work, but popup menus don't (selects etc. that need a mouse click to work), but you can do something like this: in your HTML - set an #id on the select, and turn the into a button by adding an ng-click="openSelect()", then add that function in your controller (see the openSelectController.js and select.html fragments above). Basically you turn the dropdown menu into a button, then create a new click event and trigger it on the select element directly when the button is clicked, this will open the menu which works normally from there, and closes when you click off as you would expect.