dont remember if this works, just putting it here for now

draggable.js

angular.module('draggable').directive('draggable', function(){
	return {
		restrict: 'C',
		link: function(scope, element, attrs){
			//todo:
			//register a "done" function
			//interaction with containing element
			var $element = $(element);
			var oldPos = {
				position: $element.css('position'),
				top: $element.css('top'),
				left: $element.css('left'),
				'z-index': $element.css('z-index')
			};
			$element.on('mousedown', function(e){
				var currentMousePos = {}
				var mousemoveFn = function(e){
					currentMousePos.top = e.pageY;
					currentMousePos.left = e.pageX;
				}
				$('html').on('mousemove', mousemoveFn);
				$('html').one('mouseup', function(){
					$('html').off('mousemove', mousemoveFn);
					$element.css(oldPos);
				});
				var elOffset = $(this).offset();
				var mouseOffset = {
					left: e.pageX,
					top: e.pageY
				};
				var relOffset = {
					top: mouseOffset.top - elOffset.top,
					left: mouseOffset.left - elOffset.left
				}
				$(this).css($(this).offset());
				$(this).css({
					position: "absolute",
					top: elOffset.top,
					left: elOffset.left,
					'z-index': 10000
				});
				setInterval(function(){
					$element.css({
						top: currentMousePos.top - relOffset.top,
						left: currentMousePos.left - relOffset.left
					})
				}, 10)
			})
		}
	}
});