kms 0.8.0 → 0.9.0

data/vendor/assets/bower_components/angular-ui-tree/bower.json

@@ -1,15 +1,16 @@
 {
   "name": "angular-ui-tree",
-  "version": "2.1.5",
-  "homepage": "https://github.com/JimLiu/angular-ui-tree",
+  "version": "2.22.5",
+  "homepage": "https://github.com/angular-ui-tree/angular-ui-tree",
   "authors": [
     "Jim Liu <https://github.com/JimLiu>",
-    "Voles <https://github.com/Voles>"
+    "Voles <https://github.com/Voles>",
+    "Stefan Mohr <https://github.com/StefanCodes>"
   ],
-  "description": "Tree directive for the angular.js",
+  "description": "Tree directive for AngularJS",
   "main": [
     "dist/angular-ui-tree.js",
-    "dist/angular-ui-tree.min.css"
+    "dist/angular-ui-tree.css"
   ],
   "keywords": [
     "angular",
@@ -22,22 +23,31 @@
     "node"
   ],
   "dependencies": {
-    "angular": ">= 1.2.0",
-    "es5-shim": "2.3.0"
+    "angular": "1.2.x || 1.3.x || 1.4.x || 1.5.x"
   },
   "devDependencies": {
-    "angular": ">= 1.2.0",
-    "bootstrap": "~3.1.0",
-    "jquery": ">=1.10.x",
-    "jasmine-jquery": "~1.0.0",
-    "angular-mocks": "~1.2.11",
-    "firebase": "~1.0.11",
-    "angularfire": "~0.7.1"
+    "angular-bootstrap": "~0.13.4",
+    "angular-mocks": "1.2.x || 1.3.x || 1.4.x || 1.5.x",
+    "angular-route": "1.2.x || 1.3.x || 1.4.x || 1.5.x",
+    "angularfire": "2.0.x",
+    "bootstrap-css": "~3.2.0",
+    "jasmine-jquery": "2.1.1",
+    "jquery": "~2.1.1"
   },
   "ignore": [
+    "examples",
+    "demo",
+    "build",
+    "guide",
     "node_modules",
-    "bower_components",
-    "test",
-    "tests"
-  ]
+    "source",
+    "tasks",
+    "tests",
+    "gulpfile.js",
+    "karma.conf.js",
+    "package.json"
+  ],
+  "resolutions": {
+    "angular": "1.2.x || 1.3.x || 1.4.x || 1.5.x"
+  }
 }

data/vendor/assets/bower_components/angular-ui-tree/{source → dist}/angular-ui-tree.css

@@ -1,5 +1,4 @@
 .angular-ui-tree {
-
 }
 
 .angular-ui-tree-empty {
@@ -11,26 +10,26 @@
     background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
     background-size: 60px 60px;
     background-position: 0 0, 30px 30px;
+    pointer-events: none;
 }
 
 .angular-ui-tree-nodes {
-	display: block;
-	position: relative;
-	margin: 0px;
-	padding: 0px;
-	list-style: none;
+    position: relative;
+    margin: 0;
+    padding: 0;
+    list-style: none;
 }
 
 .angular-ui-tree-nodes .angular-ui-tree-nodes {
     padding-left: 20px;
 }
+
 .angular-ui-tree-node, .angular-ui-tree-placeholder {
-	display: block;
-	position: relative;
-	margin: 0px;
-	padding: 0px;
-	min-height: 20px;
-	line-height: 20px;
+    position: relative;
+    margin: 0;
+    padding: 0;
+    min-height: 20px;
+    line-height: 20px;
 }
 
 .angular-ui-tree-hidden {
@@ -38,7 +37,7 @@
 }
 
 .angular-ui-tree-placeholder {
-    margin: 5px 0;
+    margin: 10px;
     padding: 0;
     min-height: 30px;
 }
@@ -54,10 +53,13 @@
     line-height: 20px;
 }
 
-
 .angular-ui-tree-drag {
     position: absolute;
     pointer-events: none;
     z-index: 999;
-    opacity: .8;    
-}
+    opacity: .8;
+}
+
+.angular-ui-tree-drag .tree-node-content {
+    margin-top: 0;
+}

data/vendor/assets/bower_components/angular-ui-tree/dist/angular-ui-tree.js

@@ -1,6 +1,6 @@
 /**
- * @license Angular UI Tree v2.1.5
- * (c) 2010-2014. https://github.com/JimLiu/angular-ui-tree
+ * @license Angular UI Tree v2.22.5
+ * (c) 2010-2017. https://github.com/angular-ui-tree/angular-ui-tree
  * License: MIT
  */
 (function () {
@@ -14,10 +14,11 @@
       nodesClass: 'angular-ui-tree-nodes',
       nodeClass: 'angular-ui-tree-node',
       handleClass: 'angular-ui-tree-handle',
-      placeHolderClass: 'angular-ui-tree-placeholder',
+      placeholderClass: 'angular-ui-tree-placeholder',
       dragClass: 'angular-ui-tree-drag',
       dragThreshold: 3,
-      levelThreshold: 30
+      defaultCollapsed: false,
+      appendChildOnHover: true
     });
 
 })();
@@ -27,326 +28,166 @@
 
   angular.module('ui.tree')
 
-   /**
-    * @ngdoc service
-    * @name ui.tree.service:$helper
-    * @requires ng.$document
-    * @requires ng.$window
-    *
-    * @description
-    * angular-ui-tree.
-    */
-    .factory('$uiTreeHelper', ['$document', '$window',
-      function ($document, $window) {
-        return {
-
-          /**
-           * A hashtable used to storage data of nodes
-           * @type {Object}
-           */
-          nodesData: {
-          },
-
-          setNodeAttribute: function(scope, attrName, val) {
-            var data = this.nodesData[scope.$modelValue.$$hashKey];
-            if (!data) {
-              data = {};
-              this.nodesData[scope.$modelValue.$$hashKey] = data;
-            }
-            data[attrName] = val;
-          },
-
-          getNodeAttribute: function(scope, attrName) {
-            var data = this.nodesData[scope.$modelValue.$$hashKey];
-            if (data) {
-              return data[attrName];
-            }
-            return null;
-          },
-
-          /**
-           * @ngdoc method
-           * @methodOf ui.tree.service:$nodrag
-           * @param  {Object} targetElm angular element
-           * @return {Bool} check if the node can be dragged.
-           */
-          nodrag: function (targetElm) {
-            return (typeof targetElm.attr('data-nodrag')) != "undefined";
-          },
-
-          /**
-           * get the event object for touchs
-           * @param  {[type]} e [description]
-           * @return {[type]}   [description]
-           */
-          eventObj: function(e) {
-            var obj = e;
-            if (e.targetTouches !== undefined) {
-              obj = e.targetTouches.item(0);
-            } else if (e.originalEvent !== undefined && e.originalEvent.targetTouches !== undefined) {
-              obj = e.originalEvent.targetTouches.item(0);
-            }
-            return obj;
-          },
-
-          dragInfo: function(node) {
-            return {
-              source: node,
-              sourceInfo: {
-                nodeScope: node,
-                index: node.index(),
-                nodesScope: node.$parentNodesScope
-              },
-              index: node.index(),
-              siblings: node.siblings().slice(0),
-              parent: node.$parentNodesScope,
-
-              moveTo: function(parent, siblings, index) { // Move the node to a new position
-                this.parent = parent;
-                this.siblings = siblings.slice(0);
-                var i = this.siblings.indexOf(this.source); // If source node is in the target nodes
-                if (i > -1) {
-                  this.siblings.splice(i, 1);
-                  if (this.source.index() < index) {
-                    index--;
-                  }
-                }
-                this.siblings.splice(index, 0, this.source);
-                this.index = index;
-              },
-
-              parentNode: function() {
-                return this.parent.$nodeScope;
-              },
-
-              prev: function() {
-                if (this.index > 0) {
-                  return this.siblings[this.index - 1];
-                }
-                return null;
-              },
-
-              next: function() {
-                if (this.index < this.siblings.length - 1) {
-                  return this.siblings[this.index + 1];
-                }
-                return null;
-              },
-
-              isDirty: function() {
-                return this.source.$parentNodesScope != this.parent ||
-                        this.source.index() != this.index;
-              },
-
-              eventArgs: function(elements, pos) {
-                return {
-                  source: this.sourceInfo,
-                  dest: {
-                    index: this.index,
-                    nodesScope: this.parent
-                  },
-                  elements: elements,
-                  pos: pos
-                };
-              },
+    .controller('TreeHandleController', ['$scope', '$element',
+      function ($scope, $element) {
+        this.scope = $scope;
 
-              apply: function() {
-                var nodeData = this.source.$modelValue;
-                this.source.remove();
-                this.parent.insertNode(this.index, nodeData);
-              }
-            };
-          },
+        $scope.$element = $element;
+        $scope.$nodeScope = null;
+        $scope.$type = 'uiTreeHandle';
 
-          /**
-          * @ngdoc method
-          * @name hippo.theme#height
-          * @methodOf ui.tree.service:$helper
-          *
-          * @description
-          * Get the height of an element.
-          *
-          * @param {Object} element Angular element.
-          * @returns {String} Height
-          */
-          height: function (element) {
-            return element.prop('scrollHeight');
-          },
+      }
+    ]);
+})();
 
-          /**
-          * @ngdoc method
-          * @name hippo.theme#width
-          * @methodOf ui.tree.service:$helper
-          *
-          * @description
-          * Get the width of an element.
-          *
-          * @param {Object} element Angular element.
-          * @returns {String} Width
-          */
-          width: function (element) {
-            return element.prop('scrollWidth');
-          },
+(function () {
+  'use strict';
 
-          /**
-          * @ngdoc method
-          * @name hippo.theme#offset
-          * @methodOf ui.nestedSortable.service:$helper
-          *
-          * @description
-          * Get the offset values of an element.
-          *
-          * @param {Object} element Angular element.
-          * @returns {Object} Object with properties width, height, top and left
-          */
-          offset: function (element) {
-            var boundingClientRect = element[0].getBoundingClientRect();
+  angular.module('ui.tree')
+    .controller('TreeNodeController', ['$scope', '$element',
+      function ($scope, $element) {
+        this.scope = $scope;
 
-            return {
-                width: element.prop('offsetWidth'),
-                height: element.prop('offsetHeight'),
-                top: boundingClientRect.top + ($window.pageYOffset || $document[0].body.scrollTop || $document[0].documentElement.scrollTop),
-                left: boundingClientRect.left + ($window.pageXOffset || $document[0].body.scrollLeft  || $document[0].documentElement.scrollLeft)
-              };
-          },
+        $scope.$element = $element;
+        $scope.$modelValue = null; // Model value for node;
+        $scope.$parentNodeScope = null; // uiTreeNode Scope of parent node;
+        $scope.$childNodesScope = null; // uiTreeNodes Scope of child nodes.
+        $scope.$parentNodesScope = null; // uiTreeNodes Scope of parent nodes.
+        $scope.$treeScope = null; // uiTree scope
+        $scope.$handleScope = null; // it's handle scope
+        $scope.$type = 'uiTreeNode';
+        $scope.$$allowNodeDrop = false;
+        $scope.collapsed = false;
+        $scope.expandOnHover = false;
 
-          /**
-          * @ngdoc method
-          * @name hippo.theme#positionStarted
-          * @methodOf ui.tree.service:$helper
-          *
-          * @description
-          * Get the start position of the target element according to the provided event properties.
-          *
-          * @param {Object} e Event
-          * @param {Object} target Target element
-          * @returns {Object} Object with properties offsetX, offsetY, startX, startY, nowX and dirX.
-          */
-          positionStarted: function (e, target) {
-            var pos = {};
-            pos.offsetX = e.pageX - this.offset(target).left;
-            pos.offsetY = e.pageY - this.offset(target).top;
-            pos.startX = pos.lastX = e.pageX;
-            pos.startY = pos.lastY = e.pageY;
-            pos.nowX = pos.nowY = pos.distX = pos.distY = pos.dirAx = 0;
-            pos.dirX = pos.dirY = pos.lastDirX = pos.lastDirY = pos.distAxX = pos.distAxY = 0;
-            return pos;
-          },
+        //Called by uiTreeNode Directive on load.
+        $scope.init = function (controllersArr) {
+          var treeNodesCtrl = controllersArr[0];
+          $scope.$treeScope = controllersArr[1] ? controllersArr[1].scope : null;
 
-          positionMoved: function (e, pos, firstMoving) {
-            // mouse position last events
-            pos.lastX = pos.nowX;
-            pos.lastY = pos.nowY;
+          //Find the scope of it's parent node.
+          $scope.$parentNodeScope = treeNodesCtrl.scope.$nodeScope;
 
-            // mouse position this events
-            pos.nowX  = e.pageX;
-            pos.nowY  = e.pageY;
+          //modelValue for current node.
+          $scope.$modelValue = treeNodesCtrl.scope.$modelValue[$scope.$index];
+          $scope.$parentNodesScope = treeNodesCtrl.scope;
 
-            // distance mouse moved between events
-            pos.distX = pos.nowX - pos.lastX;
-            pos.distY = pos.nowY - pos.lastY;
+          //Init sub nodes.
+          treeNodesCtrl.scope.initSubNode($scope);
 
-            // direction mouse was moving
-            pos.lastDirX = pos.dirX;
-            pos.lastDirY = pos.dirY;
+          $element.on('$destroy', function () {
 
-            // direction mouse is now moving (on both axis)
-            pos.dirX = pos.distX === 0 ? 0 : pos.distX > 0 ? 1 : -1;
-            pos.dirY = pos.distY === 0 ? 0 : pos.distY > 0 ? 1 : -1;
+            //Destroy sub nodes.
+            treeNodesCtrl.scope.destroySubNode($scope);
+          });
+        };
 
-            // axis mouse is now moving on
-            var newAx   = Math.abs(pos.distX) > Math.abs(pos.distY) ? 1 : 0;
+        //Return the index of child node in parent node (nodesScope).
+        $scope.index = function () {
+          return $scope.$parentNodesScope.$modelValue.indexOf($scope.$modelValue);
+        };
 
-            // do nothing on first move
-            if (firstMoving) {
-              pos.dirAx  = newAx;
-              pos.moving = true;
-              return;
-            }
+        $scope.dragEnabled = function () {
+          return !($scope.$treeScope && !$scope.$treeScope.dragEnabled);
+        };
 
-            // calc distance moved on this axis (and direction)
-            if (pos.dirAx !== newAx) {
-              pos.distAxX = 0;
-              pos.distAxY = 0;
-            } else {
-              pos.distAxX += Math.abs(pos.distX);
-              if (pos.dirX !== 0 && pos.dirX !== pos.lastDirX) {
-                pos.distAxX = 0;
-              }
+        $scope.isSibling = function (targetNode) {
+          return $scope.$parentNodesScope == targetNode.$parentNodesScope;
+        };
 
-              pos.distAxY += Math.abs(pos.distY);
-              if (pos.dirY !== 0 && pos.dirY !== pos.lastDirY) {
-                pos.distAxY = 0;
-              }
-            }
+        $scope.isChild = function (targetNode) {
+          var nodes = $scope.childNodes();
+          return nodes && nodes.indexOf(targetNode) > -1;
+        };
 
-            pos.dirAx = newAx;
+        //TODO(jcarter): This method is on uiTreeHelper already.
+        $scope.prev = function () {
+          var index = $scope.index();
+          if (index > 0) {
+            return $scope.siblings()[index - 1];
           }
+          return null;
         };
-      }
-    ]);
-
-})();
-(function () {
-  'use strict';
 
-  angular.module('ui.tree')
+        //Calls childNodes on parent.
+        $scope.siblings = function () {
+          return $scope.$parentNodesScope.childNodes();
+        };
 
-    .controller('TreeController', ['$scope', '$element', '$attrs', 'treeConfig',
-      function ($scope, $element, $attrs, treeConfig) {
-        this.scope = $scope;
+        $scope.childNodesCount = function () {
+          return $scope.childNodes() ? $scope.childNodes().length : 0;
+        };
 
-        $scope.$element = $element;
-        $scope.$nodesScope = null; // root nodes
-        $scope.$type = 'uiTree';
-        $scope.$emptyElm = null;
-        $scope.$callbacks = null;
+        $scope.hasChild = function () {
+          return $scope.childNodesCount() > 0;
+        };
 
-        $scope.dragEnabled = true;
-        $scope.emptyPlaceHolderEnabled = true;
-        $scope.maxDepth = 0;
-        $scope.dragDelay = 0;
+        $scope.childNodes = function () {
+          return $scope.$childNodesScope && $scope.$childNodesScope.$modelValue ?
+            $scope.$childNodesScope.childNodes() :
+            null;
+        };
 
-        // Check if it's a empty tree
-        $scope.isEmpty = function() {
-          return ($scope.$nodesScope && $scope.$nodesScope.$modelValue
-            && $scope.$nodesScope.$modelValue.length === 0);
+        $scope.accept = function (sourceNode, destIndex) {
+          return $scope.$childNodesScope &&
+            $scope.$childNodesScope.$modelValue &&
+            $scope.$childNodesScope.accept(sourceNode, destIndex);
         };
 
-        // add placeholder to empty tree
-        $scope.place = function(placeElm) {
-          $scope.$nodesScope.$element.append(placeElm);
-          $scope.$emptyElm.remove();
+        $scope.remove = function () {
+          return $scope.$parentNodesScope.removeNode($scope);
         };
 
-        $scope.resetEmptyElement = function() {
-          if ($scope.$nodesScope.$modelValue.length === 0 &&
-            $scope.emptyPlaceHolderEnabled) {
-            $element.append($scope.$emptyElm);
-          } else {
-            $scope.$emptyElm.remove();
-          }
+        $scope.toggle = function () {
+          $scope.collapsed = !$scope.collapsed;
+          $scope.$treeScope.$callbacks.toggle($scope.collapsed, $scope);
         };
 
-        var collapseOrExpand = function(scope, collapsed) {
-          var nodes = scope.childNodes();
-          for (var i = 0; i < nodes.length; i++) {
-            collapsed ? nodes[i].collapse() : nodes[i].expand();
-            var subScope = nodes[i].$childNodesScope;
-            if (subScope) {
-              collapseOrExpand(subScope, collapsed);
-            }
-          }
+        $scope.collapse = function () {
+          $scope.collapsed = true;
         };
 
-        $scope.collapseAll = function() {
-          collapseOrExpand($scope.$nodesScope, true);
+        $scope.expand = function () {
+          $scope.collapsed = false;
         };
 
-        $scope.expandAll = function() {
-          collapseOrExpand($scope.$nodesScope, false);
+        $scope.depth = function () {
+          var parentNode = $scope.$parentNodeScope;
+          if (parentNode) {
+            return parentNode.depth() + 1;
+          }
+          return 1;
         };
 
+        /**
+        * Returns the depth of the deepest subtree under this node
+        * @param scope a TreeNodesController scope object
+        * @returns Depth of all nodes *beneath* this node. If scope belongs to a leaf node, the
+        *   result is 0 (it has no subtree).
+        */
+        function countSubTreeDepth(scope) {
+          if (!scope) {
+            return 0;
+          }
+          var thisLevelDepth = 0,
+              childNodes = scope.childNodes(),
+              childNode,
+              childDepth,
+              i;
+          if (!childNodes || childNodes.length === 0) {
+            return 0;
+          }
+          for (i = childNodes.length - 1; i >= 0 ; i--) {
+            childNode = childNodes[i],
+            childDepth = 1 + countSubTreeDepth(childNode);
+            thisLevelDepth = Math.max(thisLevelDepth, childDepth);
+          }
+          return thisLevelDepth;
+        }
+
+        $scope.maxSubDepth = function () {
+          return $scope.$childNodesScope ? countSubTreeDepth($scope.$childNodesScope) : 0;
+        };
       }
     ]);
 })();
@@ -356,8 +197,8 @@
 
   angular.module('ui.tree')
 
-    .controller('TreeNodesController', ['$scope', '$element', 'treeConfig',
-      function ($scope, $element, treeConfig) {
+    .controller('TreeNodesController', ['$scope', '$element',
+      function ($scope, $element) {
         this.scope = $scope;
 
         $scope.$element = $element;
@@ -367,37 +208,44 @@
         $scope.$type = 'uiTreeNodes';
         $scope.$nodesMap = {};
 
-        $scope.nodrop = false;
+        $scope.nodropEnabled = false;
         $scope.maxDepth = 0;
+        $scope.cloneEnabled = false;
 
-        $scope.initSubNode = function(subNode) {
+        $scope.initSubNode = function (subNode) {
+          if (!subNode.$modelValue) {
+            return null;
+          }
           $scope.$nodesMap[subNode.$modelValue.$$hashKey] = subNode;
         };
 
-        $scope.destroySubNode = function(subNode) {
+        $scope.destroySubNode = function (subNode) {
+          if (!subNode.$modelValue) {
+            return null;
+          }
           $scope.$nodesMap[subNode.$modelValue.$$hashKey] = null;
         };
 
-        $scope.accept = function(sourceNode, destIndex) {
+        $scope.accept = function (sourceNode, destIndex) {
           return $scope.$treeScope.$callbacks.accept(sourceNode, $scope, destIndex);
         };
 
-        $scope.beforeDrag = function(sourceNode) {
+        $scope.beforeDrag = function (sourceNode) {
           return $scope.$treeScope.$callbacks.beforeDrag(sourceNode);
         };
 
-        $scope.isParent = function(node) {
+        $scope.isParent = function (node) {
           return node.$parentNodesScope == $scope;
         };
 
-        $scope.hasChild = function() {
+        $scope.hasChild = function () {
           return $scope.$modelValue.length > 0;
         };
 
-        $scope.safeApply = function(fn) {
+        $scope.safeApply = function (fn) {
           var phase = this.$root.$$phase;
-          if(phase == '$apply' || phase == '$digest') {
-            if(fn && (typeof(fn) === 'function')) {
+          if (phase == '$apply' || phase == '$digest') {
+            if (fn && (typeof (fn) === 'function')) {
               fn();
             }
           } else {
@@ -405,34 +253,36 @@
           }
         };
 
-        $scope.removeNode = function(node) {
+        //Called in apply method of UiTreeHelper.dragInfo.
+        $scope.removeNode = function (node) {
           var index = $scope.$modelValue.indexOf(node.$modelValue);
           if (index > -1) {
-            $scope.safeApply(function() {
+            $scope.safeApply(function () {
               $scope.$modelValue.splice(index, 1)[0];
             });
-            return node;
+            return $scope.$treeScope.$callbacks.removed(node);
           }
           return null;
         };
 
-        $scope.insertNode = function(index, nodeData) {
-          $scope.safeApply(function() {
+        //Called in apply method of UiTreeHelper.dragInfo.
+        $scope.insertNode = function (index, nodeData) {
+          $scope.safeApply(function () {
             $scope.$modelValue.splice(index, 0, nodeData);
           });
         };
 
-        $scope.childNodes = function() {
-          var nodes = [];
+        $scope.childNodes = function () {
+          var i, nodes = [];
           if ($scope.$modelValue) {
-            for (var i = 0; i < $scope.$modelValue.length; i++) {
+            for (i = 0; i < $scope.$modelValue.length; i++) {
               nodes.push($scope.$nodesMap[$scope.$modelValue[i].$$hashKey]);
             }
           }
           return nodes;
         };
 
-        $scope.depth = function() {
+        $scope.depth = function () {
           if ($scope.$nodeScope) {
             return $scope.$nodeScope.depth();
           }
@@ -440,7 +290,7 @@
         };
 
         // check if depth limit has reached
-        $scope.outOfDepth = function(sourceNode) {
+        $scope.outOfDepth = function (sourceNode) {
           var maxDepth = $scope.maxDepth || $scope.$treeScope.maxDepth;
           if (maxDepth > 0) {
             return $scope.depth() + sourceNode.maxSubDepth() + 1 > maxDepth;
@@ -451,339 +301,290 @@
       }
     ]);
 })();
+
 (function () {
   'use strict';
 
   angular.module('ui.tree')
 
-    .controller('TreeNodeController', ['$scope', '$element', '$attrs', 'treeConfig',
-      function ($scope, $element, $attrs, treeConfig) {
+    .controller('TreeController', ['$scope', '$element',
+      function ($scope, $element) {
         this.scope = $scope;
 
         $scope.$element = $element;
-        $scope.$modelValue = null; // Model value for node;
-        $scope.$parentNodeScope = null; // uiTreeNode Scope of parent node;
-        $scope.$childNodesScope = null; // uiTreeNodes Scope of child nodes.
-        $scope.$parentNodesScope = null; // uiTreeNodes Scope of parent nodes.
-        $scope.$treeScope = null; // uiTree scope
-        $scope.$handleScope = null; // it's handle scope
-        $scope.$type = 'uiTreeNode';
-        $scope.$$apply = false; //
+        $scope.$nodesScope = null; // root nodes
+        $scope.$type = 'uiTree';
+        $scope.$emptyElm = null;
+        $scope.$callbacks = null;
 
-        $scope.collapsed = false;
+        $scope.dragEnabled = true;
+        $scope.emptyPlaceholderEnabled = true;
+        $scope.maxDepth = 0;
+        $scope.dragDelay = 0;
+        $scope.cloneEnabled = false;
+        $scope.nodropEnabled = false;
 
-        $scope.init = function(controllersArr) {
-          var treeNodesCtrl = controllersArr[0];
-          $scope.$treeScope = controllersArr[1] ? controllersArr[1].scope : null;
-
-          // find the scope of it's parent node
-          $scope.$parentNodeScope = treeNodesCtrl.scope.$nodeScope;
-          // modelValue for current node
-          $scope.$modelValue = treeNodesCtrl.scope.$modelValue[$scope.$index];
-          $scope.$parentNodesScope = treeNodesCtrl.scope;
-          treeNodesCtrl.scope.initSubNode($scope); // init sub nodes
-
-          $element.on('$destroy', function() {
-            treeNodesCtrl.scope.destroySubNode($scope); // destroy sub nodes
-          });
-        };
-
-        $scope.index = function() {
-          return $scope.$parentNodesScope.$modelValue.indexOf($scope.$modelValue);
-        };
-
-        $scope.dragEnabled = function() {
-          return !($scope.$treeScope && !$scope.$treeScope.dragEnabled);
-        };
-
-        $scope.isSibling = function(targetNode) {
-          return $scope.$parentNodesScope == targetNode.$parentNodesScope;
+        // Check if it's a empty tree
+        $scope.isEmpty = function () {
+          return ($scope.$nodesScope && $scope.$nodesScope.$modelValue
+          && $scope.$nodesScope.$modelValue.length === 0);
         };
 
-        $scope.isChild = function(targetNode) {
-          var nodes = $scope.childNodes();
-          return nodes && nodes.indexOf(targetNode) > -1;
+        // add placeholder to empty tree
+        $scope.place = function (placeElm) {
+          $scope.$nodesScope.$element.append(placeElm);
+          $scope.$emptyElm.remove();
         };
 
-        $scope.prev = function() {
-          var index = $scope.index();
-          if (index > 0) {
-            return $scope.siblings()[index - 1];
+        this.resetEmptyElement = function () {
+          if ((!$scope.$nodesScope.$modelValue || $scope.$nodesScope.$modelValue.length === 0) &&
+            $scope.emptyPlaceholderEnabled) {
+            $element.append($scope.$emptyElm);
+          } else {
+            $scope.$emptyElm.remove();
           }
-          return null;
-        };
-
-        $scope.siblings = function() {
-          return $scope.$parentNodesScope.childNodes();
-        };
-
-        $scope.childNodesCount = function() {
-          return $scope.childNodes() ? $scope.childNodes().length : 0;
-        };
-
-        $scope.hasChild = function() {
-          return $scope.childNodesCount() > 0;
         };
 
-        $scope.childNodes = function() {
-          return $scope.$childNodesScope && $scope.$childNodesScope.$modelValue ?
-              $scope.$childNodesScope.childNodes() :
-              null;
-        };
-
-        $scope.accept = function(sourceNode, destIndex) {
-          return $scope.$childNodesScope &&
-                  $scope.$childNodesScope.$modelValue &&
-                  $scope.$childNodesScope.accept(sourceNode, destIndex);
-        };
+        $scope.resetEmptyElement = this.resetEmptyElement;
+      }
+    ]);
+})();
 
-        $scope.removeNode = function(){
-          var node = $scope.remove();
-          $scope.$callbacks.removed(node);
-          return node;
-        };
+(function () {
+  'use strict';
 
-        $scope.remove = function() {
-          return $scope.$parentNodesScope.removeNode($scope);
-        };
+  angular.module('ui.tree')
+    .directive('uiTree', ['treeConfig', '$window',
+      function (treeConfig, $window) {
+        return {
+          restrict: 'A',
+          scope: true,
+          controller: 'TreeController',
+          link: function (scope, element, attrs, ctrl) {
+            var callbacks = {
+              accept: null,
+              beforeDrag: null
+            },
+            config = {},
+            tdElm,
+            $trElm,
+            emptyElmColspan;
+
+            //Adding configured class to uiTree.
+            angular.extend(config, treeConfig);
 
-        $scope.toggle = function() {
-          $scope.collapsed = !$scope.collapsed;
-        };
+            if (config.treeClass) {
+              element.addClass(config.treeClass);
+            }
 
-        $scope.collapse = function() {
-          $scope.collapsed = true;
-        };
+            //Determining if uiTree is on a table.
+            if (element.prop('tagName').toLowerCase() === 'table') {
+              scope.$emptyElm = angular.element($window.document.createElement('tr'));
+              $trElm = element.find('tr');
+              
+              //If we can find a tr, then we can use its td children as the empty element colspan.
+              if ($trElm.length > 0) {
+                emptyElmColspan = angular.element($trElm).children().length;
+              } else {
+                
+                //If not, by setting a huge colspan we make sure it takes full width.
+                //TODO(jcarter): Check for negative side effects.
+                emptyElmColspan = 1000000;
+              }
+              tdElm = angular.element($window.document.createElement('td'))
+                .attr('colspan', emptyElmColspan);
+              scope.$emptyElm.append(tdElm);
+            } else {
+              scope.$emptyElm = angular.element($window.document.createElement('div'));
+            }
 
-        $scope.expand = function() {
-          $scope.collapsed = false;
-        };
+            if (config.emptyTreeClass) {
+              scope.$emptyElm.addClass(config.emptyTreeClass);
+            }
 
-        $scope.depth = function() {
-          var parentNode = $scope.$parentNodeScope;
-          if (parentNode) {
-            return parentNode.depth() + 1;
-          }
-          return 1;
-        };
+            scope.$watch('$nodesScope.$modelValue.length', function (val) {
+              if (!angular.isNumber(val)) {
+                return;
+              }
 
-        var subDepth = 0;
-        var countSubDepth = function(scope) {
-          var count = 0;
-          var nodes = scope.childNodes();
-          for (var i = 0; i < nodes.length; i++) {
-            var childNodes = nodes[i].$childNodesScope;
-            if (childNodes) {
-              count = 1;
-              countSubDepth(childNodes);
-            }
-          }
-          subDepth += count;
-        };
+              ctrl.resetEmptyElement();
+            }, true);
 
-        $scope.maxSubDepth = function() {
-          subDepth = 0;
-          if ($scope.$childNodesScope) {
-            countSubDepth($scope.$childNodesScope);
-          }
-          return subDepth;
-        };
+            scope.$watch(attrs.dragEnabled, function (val) {
+              if ((typeof val) == 'boolean') {
+                scope.dragEnabled = val;
+              }
+            });
 
-      }
-    ]);
-})();
+            scope.$watch(attrs.emptyPlaceholderEnabled, function (val) {
+              if ((typeof val) == 'boolean') {
+                scope.emptyPlaceholderEnabled = val;
+                ctrl.resetEmptyElement();
+              }
+            });
 
-(function () {
-  'use strict';
+            scope.$watch(attrs.nodropEnabled, function (val) {
+              if ((typeof val) == 'boolean') {
+                scope.nodropEnabled = val;
+              }
+            });
 
-  angular.module('ui.tree')
+            scope.$watch(attrs.cloneEnabled, function (val) {
+              if ((typeof val) == 'boolean') {
+                scope.cloneEnabled = val;
+              }
+            });
 
-    .controller('TreeHandleController', ['$scope', '$element', '$attrs', 'treeConfig',
-      function ($scope, $element, $attrs, treeConfig) {
-        this.scope = $scope;
+            scope.$watch(attrs.maxDepth, function (val) {
+              if ((typeof val) == 'number') {
+                scope.maxDepth = val;
+              }
+            });
 
-        $scope.$element = $element;
-        $scope.$nodeScope = null;
-        $scope.$type = 'uiTreeHandle';
+            scope.$watch(attrs.dragDelay, function (val) {
+              if ((typeof val) == 'number') {
+                scope.dragDelay = val;
+              }
+            });
 
-      }
-    ]);
-})();
+            /**
+             * Callback checks if the destination node can accept the dragged node.
+             * By default, ui-tree will check that 'data-nodrop-enabled' is not set for the
+             * destination ui-tree-nodes, and that the 'max-depth' attribute will not be exceeded
+             * if it is set on the ui-tree or ui-tree-nodes.
+             * This callback can be overridden, but callers must manually enforce nodrop and max-depth
+             * themselves if they need those to be enforced.
+             * @param sourceNodeScope Scope of the ui-tree-node being dragged
+             * @param destNodesScope Scope of the ui-tree-nodes where the node is hovering
+             * @param destIndex Index in the destination nodes array where the source node will drop
+             * @returns {boolean} True if the node is permitted to be dropped here
+             */
+            callbacks.accept = function (sourceNodeScope, destNodesScope, destIndex) {
+              return !(destNodesScope.nodropEnabled || destNodesScope.$treeScope.nodropEnabled || destNodesScope.outOfDepth(sourceNodeScope));
+            };
 
-(function () {
-  'use strict';
+            callbacks.beforeDrag = function (sourceNodeScope) {
+              return true;
+            };
 
-  angular.module('ui.tree')
-  .directive('uiTree', [ 'treeConfig', '$window',
-    function(treeConfig, $window) {
-      return {
-        restrict: 'A',
-        scope: true,
-        controller: 'TreeController',
-        link: function(scope, element, attrs) {
-          var callbacks = {
-            accept: null,
-            beforeDrag: null
-          };
-
-          var config = {};
-          angular.extend(config, treeConfig);
-          if (config.treeClass) {
-            element.addClass(config.treeClass);
-          }
+            callbacks.expandTimeoutStart = function()
+            {
 
-          scope.$emptyElm = angular.element($window.document.createElement('div'));
-          if (config.emptyTreeClass) {
-            scope.$emptyElm.addClass(config.emptyTreeClass);
-          }
+            };
 
-          scope.$watch('$nodesScope.$modelValue.length', function() {
-            if (scope.$nodesScope.$modelValue) {
-              scope.resetEmptyElement();
-            }
-          }, true);
+            callbacks.expandTimeoutCancel = function()
+            {
 
-          scope.$watch(attrs.dragEnabled, function(val) {
-            if((typeof val) == "boolean") {
-              scope.dragEnabled = val;
-            }
-          });
+            };
 
-          scope.$watch(attrs.emptyPlaceHolderEnabled, function(val) {
-            if((typeof val) == "boolean") {
-              scope.emptyPlaceHolderEnabled = val;
-            }
-          });
+            callbacks.expandTimeoutEnd = function()
+            {
 
-          scope.$watch(attrs.maxDepth, function(val) {
-            if((typeof val) == "number") {
-              scope.maxDepth = val;
-            }
-          });
+            };
 
-          scope.$watch(attrs.dragDelay, function(val) {
-            if((typeof val) == "number") {
-              scope.dragDelay = val;
-            }
-          });
+            callbacks.removed = function (node) {
 
-          // check if the dest node can accept the dragging node
-          // by default, we check the 'data-nodrop' attribute in `ui-tree-nodes`
-          // and the 'max-depth' attribute in `ui-tree` or `ui-tree-nodes`.
-          // the method can be overrided
-          callbacks.accept = function(sourceNodeScope, destNodesScope, destIndex) {
-            if (destNodesScope.nodrop || destNodesScope.outOfDepth(sourceNodeScope)) {
-              return false;
-            }
-            return true;
-          };
+            };
 
-          callbacks.beforeDrag = function(sourceNodeScope) {
-            return true;
-          };
+            /**
+             * Callback is fired when a node is successfully dropped in a new location
+             * @param event
+             */
+            callbacks.dropped = function (event) {
 
-          callbacks.removed = function(node){
-          
-          };
+            };
 
-          callbacks.dropped = function(event) {
+            /**
+             * Callback is fired each time the user starts dragging a node
+             * @param event
+             */
+            callbacks.dragStart = function (event) {
 
-          };
+            };
 
-          //
-          callbacks.dragStart = function(event) {
+            /**
+             * Callback is fired each time a dragged node is moved with the mouse/touch.
+             * @param event
+             */
+            callbacks.dragMove = function (event) {
 
-          };
+            };
 
-          callbacks.dragMove = function(event) {
+            /**
+             * Callback is fired when the tree exits drag mode. If the user dropped a node, the drop may have been
+             * accepted or reverted.
+             * @param event
+             */
+            callbacks.dragStop = function (event) {
 
-          };
+            };
 
-          callbacks.dragStop = function(event) {
+            /**
+             * Callback is fired when a user drops a node (but prior to processing the drop action)
+             * beforeDrop can return a Promise, truthy, or falsy (returning nothing is falsy).
+             * If it returns falsy, or a resolve Promise, the node move is accepted
+             * If it returns truthy, or a rejected Promise, the node move is reverted
+             * @param event
+             * @returns {Boolean|Promise} Truthy (or rejected Promise) to cancel node move; falsy (or resolved promise)
+             */
+            callbacks.beforeDrop = function (event) {
 
-          };
+            };
 
-          callbacks.beforeDrop = function(event) {
+            /**
+             * Callback is fired when a user toggles node (but after processing the toggle action)
+             * @param sourceNodeScope
+             * @param collapsed
+             */
+            callbacks.toggle = function (collapsed, sourceNodeScope) {
 
-          };
+            };
 
-          scope.$watch(attrs.uiTree, function(newVal, oldVal){
-            angular.forEach(newVal, function(value, key){
-              if (callbacks[key]) {
-                if (typeof value === "function") {
-                  callbacks[key] = value;
+            scope.$watch(attrs.uiTree, function (newVal, oldVal) {
+              angular.forEach(newVal, function (value, key) {
+                if (callbacks[key]) {
+                  if (typeof value === 'function') {
+                    callbacks[key] = value;
+                  }
                 }
-              }
-            });
+              });
 
-            scope.$callbacks = callbacks;
-          }, true);
+              scope.$callbacks = callbacks;
+            }, true);
 
 
-        }
-      };
-    }
-  ]);
+          }
+        };
+      }
+    ]);
 })();
 
 (function () {
   'use strict';
 
   angular.module('ui.tree')
-  .directive('uiTreeNodes', [ 'treeConfig', '$window',
-    function(treeConfig) {
-      return {
-        require: ['ngModel', '?^uiTreeNode', '^uiTree'],
-        restrict: 'A',
-        scope: true,
-        controller: 'TreeNodesController',
-        link: function(scope, element, attrs, controllersArr) {
-
-          var config = {};
-          angular.extend(config, treeConfig);
-          if (config.nodesClass) {
-            element.addClass(config.nodesClass);
-          }
-
-          var ngModel = controllersArr[0];
-          var treeNodeCtrl = controllersArr[1];
-          var treeCtrl = controllersArr[2];
-          if (treeNodeCtrl) {
-            treeNodeCtrl.scope.$childNodesScope = scope;
-            scope.$nodeScope = treeNodeCtrl.scope;
-          }
-          else { // find the root nodes if there is no parent node and have a parent ui-tree
-            treeCtrl.scope.$nodesScope = scope;
-          }
-          scope.$treeScope = treeCtrl.scope;
-
-          if (ngModel) {
-            ngModel.$render = function() {
-              if (!ngModel.$modelValue || !angular.isArray(ngModel.$modelValue)) {
-                scope.$modelValue = [];
-              }
-              scope.$modelValue = ngModel.$modelValue;
-            };
-          }
-
-          scope.$watch(attrs.maxDepth, function(val) {
-            if((typeof val) == "number") {
-              scope.maxDepth = val;
+    .directive('uiTreeHandle', ['treeConfig',
+      function (treeConfig) {
+        return {
+          require: '^uiTreeNode',
+          restrict: 'A',
+          scope: true,
+          controller: 'TreeHandleController',
+          link: function (scope, element, attrs, treeNodeCtrl) {
+            var config = {};
+            angular.extend(config, treeConfig);
+            if (config.handleClass) {
+              element.addClass(config.handleClass);
             }
-          });
-
-          attrs.$observe('nodrop', function(val) {
-            scope.nodrop = ((typeof val) != "undefined");
-          });
-
-          attrs.$observe('horizontal', function(val) {
-            scope.horizontal = ((typeof val) != "undefined");
-          });
-
-        }
-      };
-    }
-  ]);
+            // connect with the tree node.
+            if (scope != treeNodeCtrl.scope) {
+              scope.$nodeScope = treeNodeCtrl.scope;
+              treeNodeCtrl.scope.$handleScope = scope;
+            }
+          }
+        };
+      }
+    ]);
 })();
 
 (function () {
@@ -791,453 +592,1238 @@
 
   angular.module('ui.tree')
 
-    .directive('uiTreeNode', ['treeConfig', '$uiTreeHelper', '$window', '$document','$timeout',
-      function (treeConfig, $uiTreeHelper, $window, $document, $timeout) {
+    .directive('uiTreeNode', ['treeConfig', 'UiTreeHelper', '$window', '$document', '$timeout', '$q',
+      function (treeConfig, UiTreeHelper, $window, $document, $timeout, $q) {
         return {
           require: ['^uiTreeNodes', '^uiTree'],
           restrict: 'A',
           controller: 'TreeNodeController',
-          link: function(scope, element, attrs, controllersArr) {
-            var config = {};
+          link: function (scope, element, attrs, controllersArr) {
+            var config = {},
+              hasTouch = 'ontouchstart' in window,
+              firstMoving,
+              dragInfo,
+              pos,
+              placeElm,
+              hiddenPlaceElm,
+              dragElm,
+              scrollContainerElm,
+              unhover,
+              treeScope = null,
+              elements, // As a parameter for callbacks
+              dragDelaying = true,
+              dragStarted = false,
+              dragTimer = null,
+              body = document.body,
+              html = document.documentElement,
+              document_height,
+              document_width,
+              dragStart,
+              tagName,
+              dragMove,
+              dragEnd,
+              dragStartEvent,
+              dragMoveEvent,
+              dragEndEvent,
+              dragCancelEvent,
+              dragDelay,
+              bindDragStartEvents,
+              bindDragMoveEvents,
+              unbindDragMoveEvents,
+              keydownHandler,
+              isHandleChild,
+              el,
+              isUiTreeRoot,
+              treeOfOrigin;
+
+            //Adding configured class to ui-tree-node.
             angular.extend(config, treeConfig);
+
             if (config.nodeClass) {
               element.addClass(config.nodeClass);
             }
+
+            //Call init function in nodeCtrl, sets parent node and sets up sub nodes.
             scope.init(controllersArr);
 
-            scope.collapsed = !!$uiTreeHelper.getNodeAttribute(scope, 'collapsed');
+            scope.collapsed = !!UiTreeHelper.getNodeAttribute(scope, 'collapsed') || treeConfig.defaultCollapsed;
+            scope.expandOnHover = !!UiTreeHelper.getNodeAttribute(scope, 'expandOnHover');
+            scope.scrollContainer = UiTreeHelper.getNodeAttribute(scope, 'scrollContainer') || attrs.scrollContainer || null;
+            scope.sourceOnly = scope.nodropEnabled || scope.$treeScope.nodropEnabled;
 
-            scope.$watch(attrs.collapsed, function(val) {
-              if((typeof val) == "boolean") {
+            scope.$watch(attrs.collapsed, function (val) {
+              if ((typeof val) == 'boolean') {
                 scope.collapsed = val;
               }
             });
 
-            scope.$watch('collapsed', function(val) {
-              $uiTreeHelper.setNodeAttribute(scope, 'collapsed', val);
+            //Watches to trigger behavior based on actions and settings.
+            scope.$watch('collapsed', function (val) {
+              UiTreeHelper.setNodeAttribute(scope, 'collapsed', val);
               attrs.$set('collapsed', val);
             });
 
-            var hasTouch = 'ontouchstart' in window;
-            // todo startPos is unused
-            var startPos, firstMoving, dragInfo, pos;
-            var placeElm, hiddenPlaceElm, dragElm;
-            var treeScope = null;
-            var elements; // As a parameter for callbacks
-            var dragDelaying = true;
-            var dragStarted = false;
-            var dragTimer = null;
-            var body = document.body,
-                html = document.documentElement,
-                document_height,
-                document_width;
-
-            var dragStart = function(e) {
-              if (!hasTouch && (e.button == 2 || e.which == 3)) {
-                // disable right click
-                return;
+            scope.$watch(attrs.expandOnHover, function(val) {
+              if ((typeof val) === 'boolean' || (typeof val) === 'number') {
+                scope.expandOnHover = val;
+              }
+            });
+
+            scope.$watch('expandOnHover', function (val) {
+              UiTreeHelper.setNodeAttribute(scope, 'expandOnHover', val);
+              attrs.$set('expandOnHover', val);
+            });
+
+            attrs.$observe('scrollContainer', function(val) {
+              if ((typeof val) === 'string') {
+                scope.scrollContainer = val;
               }
-              if (e.uiTreeDragging || (e.originalEvent && e.originalEvent.uiTreeDragging)) { // event has already fired in other scope.
+            });
+
+            scope.$watch('scrollContainer', function(val) {
+              UiTreeHelper.setNodeAttribute(scope, 'scrollContainer', val);
+              attrs.$set('scrollContainer', val);
+              scrollContainerElm = document.querySelector(val);
+            });
+
+            scope.$on('angular-ui-tree:collapse-all', function () {
+              scope.collapsed = true;
+            });
+
+            scope.$on('angular-ui-tree:expand-all', function () {
+              scope.collapsed = false;
+            });
+
+            /**
+             * Called when the user has grabbed a node and started dragging it.
+             *
+             * @param {MouseEvent} e event that is triggered by DOM.
+             * @return undefined?
+             */
+            dragStart = function (e) {
+
+              //Disable right click.
+              if (!hasTouch && (e.button === 2 || e.which === 3)) {
                 return;
               }
 
-              // the element which is clicked.
-              var eventElm = angular.element(e.target);
-              var eventScope = eventElm.scope();
-              if (!eventScope || !eventScope.$type) {
+              //Event has already fired in other scope.
+              if (e.uiTreeDragging || (e.originalEvent && e.originalEvent.uiTreeDragging)) {
                 return;
               }
-              if (eventScope.$type != 'uiTreeNode'
-                && eventScope.$type != 'uiTreeHandle') { // Check if it is a node or a handle
+
+              //The node being dragged.
+              var eventElm = angular.element(e.target),
+                isHandleChild,
+                cloneElm,
+                eventElmTagName,
+                tagName,
+                eventObj,
+                tdElm,
+                hStyle,
+                isTreeNode,
+                isTreeNodeHandle;
+
+              //If the target element is a child element of a ui-tree-handle,
+              // use the containing handle element as target element.
+              isHandleChild = UiTreeHelper.treeNodeHandlerContainerOfElement(eventElm);
+              if (isHandleChild) {
+                eventElm = angular.element(isHandleChild);
+              }
+
+              cloneElm = element.clone();
+              isTreeNode = UiTreeHelper.elementIsTreeNode(eventElm);
+              isTreeNodeHandle = UiTreeHelper.elementIsTreeNodeHandle(eventElm);
+
+              //If we are not triggering mousedown on our uiTree or any of it's parts, return.
+              if (!isTreeNode && !isTreeNodeHandle) {
                 return;
               }
-              if (eventScope.$type == 'uiTreeNode'
-                && eventScope.$handleScope) { // If the node has a handle, then it should be clicked by the handle
+
+              //If we are not triggering mousedown on our uiTree or any of it's parts, return.
+              if (isTreeNode && UiTreeHelper.elementContainsTreeNodeHandler(eventElm)) {
                 return;
               }
 
-              var eventElmTagName = eventElm.prop('tagName').toLowerCase();
+              //Dragging not allowed on inputs or buttons.
+              eventElmTagName = eventElm.prop('tagName').toLowerCase();
               if (eventElmTagName == 'input' ||
-                eventElmTagName == 'textarea' ||
-                eventElmTagName == 'button' ||
-                eventElmTagName == 'select') { // if it's a input or button, ignore it
+                  eventElmTagName == 'textarea' ||
+                  eventElmTagName == 'button' ||
+                  eventElmTagName == 'select') {
                 return;
               }
 
-              // check if it or it's parents has a 'data-nodrag' attribute
-              while (eventElm && eventElm[0] && eventElm[0] != element) {
-                if ($uiTreeHelper.nodrag(eventElm)) { // if the node mark as `nodrag`, DONOT drag it.
+              //Check if it or it's parents has a 'data-nodrag' attribute
+              el = angular.element(e.target);
+              isUiTreeRoot = el[0].attributes['ui-tree'];
+              while (el && el[0] && el[0] !== element && !isUiTreeRoot) {
+
+                //Checking that I can access attributes.
+                if (el[0].attributes) {
+                  isUiTreeRoot = el[0].attributes['ui-tree'];
+                }
+
+                //If the node mark as `nodrag`, DONOT drag it.
+                if (UiTreeHelper.nodrag(el)) {
                   return;
                 }
-                eventElm = eventElm.parent();
+                el = el.parent();
               }
 
-              if (!scope.beforeDrag(scope)){
+              //If users beforeDrag calback returns falsey, do not initiate.
+              if (!scope.beforeDrag(scope)) {
                 return;
               }
 
-              e.uiTreeDragging = true; // stop event bubbling
+              //Set property checked at start of function to prevent running logic again.
+              e.uiTreeDragging = true;
               if (e.originalEvent) {
                 e.originalEvent.uiTreeDragging = true;
               }
               e.preventDefault();
-              var eventObj = $uiTreeHelper.eventObj(e);
 
+              //Get original event if TouchEvent.
+              eventObj = UiTreeHelper.eventObj(e);
+
+              //Set boolean used to specify beginning of move.
               firstMoving = true;
-              dragInfo = $uiTreeHelper.dragInfo(scope);
 
-              var tagName = scope.$element.prop('tagName');
+              //Setting drag info properties and methods in scope of node being moved.
+              dragInfo = UiTreeHelper.dragInfo(scope);
+
+              //Setting original tree to adjust horizontal behavior in drag move.
+              treeOfOrigin = dragInfo.source.$treeScope.$id;
+
+              //Determine tage name of element ui-tree-node is on.
+              tagName = element.prop('tagName');
+
               if (tagName.toLowerCase() === 'tr') {
+
+                //Create a new table column as placeholder.
                 placeElm = angular.element($window.document.createElement(tagName));
-                var tdElm = angular.element($window.document.createElement('td'))
-                              .addClass(config.placeHolderClass);
+
+                //Create a column placeholder and set colspan to whole row length.
+                tdElm = angular.element($window.document.createElement('td'))
+                    .addClass(config.placeholderClass)
+                    .attr('colspan', element[0].children.length);
                 placeElm.append(tdElm);
               } else {
+
+                //If not a table just duplicate element and add placeholder class.
                 placeElm = angular.element($window.document.createElement(tagName))
-                              .addClass(config.placeHolderClass);
+                    .addClass(config.placeholderClass);
               }
+
+              //Create a hidden placeholder and add class from config.
               hiddenPlaceElm = angular.element($window.document.createElement(tagName));
               if (config.hiddenClass) {
                 hiddenPlaceElm.addClass(config.hiddenClass);
               }
-              pos = $uiTreeHelper.positionStarted(eventObj, scope.$element);
-              placeElm.css('height', $uiTreeHelper.height(scope.$element) + 'px');
-              placeElm.css('width', $uiTreeHelper.width(scope.$element) + 'px');
+
+              //Getting starting position of element being moved.
+              pos = UiTreeHelper.positionStarted(eventObj, element);
+              placeElm.css('height', element.prop('offsetHeight') + 'px');
+
+              //Creating drag element to represent node.
               dragElm = angular.element($window.document.createElement(scope.$parentNodesScope.$element.prop('tagName')))
-                        .addClass(scope.$parentNodesScope.$element.attr('class')).addClass(config.dragClass);
-              dragElm.css('width', $uiTreeHelper.width(scope.$element) + 'px');
+                  .addClass(scope.$parentNodesScope.$element.attr('class')).addClass(config.dragClass);
+              dragElm.css('width', UiTreeHelper.width(element) + 'px');
               dragElm.css('z-index', 9999);
 
-              // Prevents cursor to change rapidly in Opera 12.16 and IE when dragging an element
-              var hStyle = (scope.$element[0].querySelector('.angular-ui-tree-handle') || scope.$element[0]).currentStyle;
+              //Prevents cursor to change rapidly in Opera 12.16 and IE when dragging an element.
+              hStyle = (element[0].querySelector('.angular-ui-tree-handle') || element[0]).currentStyle;
               if (hStyle) {
                 document.body.setAttribute('ui-tree-cursor', $document.find('body').css('cursor') || '');
                 $document.find('body').css({'cursor': hStyle.cursor + '!important'});
               }
 
-              scope.$element.after(placeElm);
-              scope.$element.after(hiddenPlaceElm);
-              dragElm.append(scope.$element);
+              //If tree is sourceOnly (noDragDrop) don't show placeholder when moving about it.
+              if (scope.sourceOnly) {
+                placeElm.css('display', 'none');
+              }
+
+              //Insert placeholder.
+              element.after(placeElm);
+              element.after(hiddenPlaceElm);
+              if (dragInfo.isClone() && scope.sourceOnly) {
+                dragElm.append(cloneElm);
+              } else {
+                dragElm.append(element);
+              }
+
+              //Create drag element.
               $document.find('body').append(dragElm);
+
+              //Set drag elements position on screen.
               dragElm.css({
-                'left' : eventObj.pageX - pos.offsetX + 'px',
-                'top'  : eventObj.pageY - pos.offsetY + 'px'
+                'left': eventObj.pageX - pos.offsetX + 'px',
+                'top': eventObj.pageY - pos.offsetY + 'px'
               });
               elements = {
                 placeholder: placeElm,
                 dragging: dragElm
               };
 
-              angular.element($document).bind('touchend', dragEndEvent);
-              angular.element($document).bind('touchcancel', dragEndEvent);
-              angular.element($document).bind('touchmove', dragMoveEvent);
-              angular.element($document).bind('mouseup', dragEndEvent);
-              angular.element($document).bind('mousemove', dragMoveEvent);
-              angular.element($document).bind('mouseleave', dragCancelEvent);
+              //Create all drag/move bindings.
+              bindDragMoveEvents();
+
+              //Fire dragStart callback.
+              scope.$apply(function () {
+                scope.$treeScope.$callbacks.dragStart(dragInfo.eventArgs(elements, pos));
+              });
 
+              //Get bounds of document.
               document_height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
               document_width = Math.max(body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth);
             };
 
-            var dragMove = function(e) {
-              if (!dragStarted) {
-                if (!dragDelaying) {
-                  dragStarted = true;
-                  scope.$apply(function() {
-                    scope.$callbacks.dragStart(dragInfo.eventArgs(elements, pos));
-                  });
-                }
-                return;
-              }
-
-              var eventObj = $uiTreeHelper.eventObj(e);
-              var prev, leftElmPos, topElmPos;
-
+            dragMove = function (e) {
+              var eventObj = UiTreeHelper.eventObj(e),
+                prev,
+                next,
+                leftElmPos,
+                topElmPos,
+                top_scroll,
+                bottom_scroll,
+                scrollContainerElmRect,
+                target,
+                targetX,
+                targetY,
+                displayElm,
+                targetNode,
+                targetElm,
+                isEmpty,
+                scrollDownBy,
+                scrollUpBy,
+                targetOffset,
+                targetBefore,
+                moveWithinTree,
+                targetBeforeBuffer,
+                targetHeight,
+                targetChildElm,
+                targetChildHeight;
+
+              //If check ensures that drag element was created.
               if (dragElm) {
                 e.preventDefault();
 
+                //Deselect anything (text, etc.) that was selected when move began.
                 if ($window.getSelection) {
                   $window.getSelection().removeAllRanges();
                 } else if ($window.document.selection) {
                   $window.document.selection.empty();
                 }
 
+                //Get top left positioning of element being moved.
                 leftElmPos = eventObj.pageX - pos.offsetX;
                 topElmPos = eventObj.pageY - pos.offsetY;
 
-                //dragElm can't leave the screen on the left
-                if(leftElmPos < 0){
+                //dragElm can't leave the screen on the left.
+                if (leftElmPos < 0) {
                   leftElmPos = 0;
                 }
 
-                //dragElm can't leave the screen on the top
-                if(topElmPos < 0){
+                //dragElm can't leave the screen on the top.
+                if (topElmPos < 0) {
                   topElmPos = 0;
                 }
 
-                //dragElm can't leave the screen on the bottom
-                if ((topElmPos + 10) > document_height){
+                //dragElm can't leave the screen on the bottom.
+                if ((topElmPos + 10) > document_height) {
                   topElmPos = document_height - 10;
                 }
 
-                //dragElm can't leave the screen on the right
-                if((leftElmPos + 10) > document_width) {
+                //dragElm can't leave the screen on the right.
+                if ((leftElmPos + 10) > document_width) {
                   leftElmPos = document_width - 10;
                 }
 
+                //Updating element being moved css.
                 dragElm.css({
                   'left': leftElmPos + 'px',
                   'top': topElmPos + 'px'
                 });
 
-                var top_scroll = window.pageYOffset || $window.document.documentElement.scrollTop;
-                var bottom_scroll = top_scroll + (window.innerHeight || $window.document.clientHeight || $window.document.clientHeight);
+                if (scrollContainerElm) {
+                  //Getting position to top and bottom of container element.
+                  scrollContainerElmRect = scrollContainerElm.getBoundingClientRect();
+                  top_scroll = scrollContainerElm.scrollTop;
+                  bottom_scroll = top_scroll + scrollContainerElm.clientHeight;
 
-                // to scroll down if cursor y-position is greater than the bottom position the vertical scroll
-                if (bottom_scroll < eventObj.pageY && bottom_scroll <= document_height) {
-                  window.scrollBy(0, 10);
-                }
+                  //To scroll down if cursor y-position is greater than the bottom position of the container vertical scroll
+                  if (scrollContainerElmRect.bottom < eventObj.clientY && bottom_scroll < scrollContainerElm.scrollHeight) {
+                    scrollDownBy = Math.min(scrollContainerElm.scrollHeight - bottom_scroll, 10);
+                    scrollContainerElm.scrollTop += scrollDownBy;
+                  }
+
+                  //To scroll top if cursor y-position is less than the top position of the container vertical scroll
+                  if (scrollContainerElmRect.top > eventObj.clientY && top_scroll > 0) {
+                    scrollUpBy = Math.min(top_scroll, 10);
+                    scrollContainerElm.scrollTop -= scrollUpBy;
+                  }
+                } else {
+                  //Getting position to top and bottom of page.
+                  top_scroll = window.pageYOffset || $window.document.documentElement.scrollTop;
+                  bottom_scroll = top_scroll + (window.innerHeight || $window.document.clientHeight || $window.document.clientHeight);
+
+                  //To scroll down if cursor y-position is greater than the bottom position of the window vertical scroll
+                  if (bottom_scroll < eventObj.pageY && bottom_scroll < document_height) {
+                    scrollDownBy = Math.min(document_height - bottom_scroll, 10);
+                    window.scrollBy(0, scrollDownBy);
+                  }
 
-                // to scroll top if cursor y-position is less than the top position the vertical scroll
-                if (top_scroll > eventObj.pageY) {
-                  window.scrollBy(0, -10);
+                  //To scroll top if cursor y-position is less than the top position of the window vertical scroll
+                  if (top_scroll > eventObj.pageY) {
+                    scrollUpBy = Math.min(top_scroll, 10);
+                    window.scrollBy(0, -scrollUpBy);
+                  }
                 }
 
-                $uiTreeHelper.positionMoved(e, pos, firstMoving);
+                //Calling service to update position coordinates based on move.
+                UiTreeHelper.positionMoved(e, pos, firstMoving);
                 if (firstMoving) {
                   firstMoving = false;
                   return;
                 }
 
-                // move horizontal
-                if (pos.dirAx && pos.distAxX >= config.levelThreshold) {
-                  pos.distAxX = 0;
-
-                  // increase horizontal level if previous sibling exists and is not collapsed
-                  if (pos.distX > 0) {
-                    prev = dragInfo.prev();
-                    if (prev && !prev.collapsed
-                      && prev.accept(scope, prev.childNodesCount())) {
-                      prev.$childNodesScope.$element.append(placeElm);
-                      dragInfo.moveTo(prev.$childNodesScope, prev.childNodes(), prev.childNodesCount());
-                    }
-                  }
-
-                  // decrease horizontal level
-                  if (pos.distX < 0) {
-                    // we can't decrease a level if an item preceeds the current one
-                    var next = dragInfo.next();
-                    if (!next) {
-                      var target = dragInfo.parentNode(); // As a sibling of it's parent node
-                      if (target
-                        && target.$parentNodesScope.accept(scope, target.index() + 1)) {
-                        target.$element.after(placeElm);
-                        dragInfo.moveTo(target.$parentNodesScope, target.siblings(), target.index() + 1);
-                      }
-                    }
-                  }
-                }
+                //Setting X point for elementFromPoint.
+                targetX = eventObj.pageX - ($window.pageXOffset ||
+                    $window.document.body.scrollLeft ||
+                    $window.document.documentElement.scrollLeft) -
+                    ($window.document.documentElement.clientLeft || 0);
 
-                // check if add it as a child node first
-                // todo decrease is unused
-                var decrease = ($uiTreeHelper.offset(dragElm).left - $uiTreeHelper.offset(placeElm).left) >= config.threshold;
-                var targetX = eventObj.pageX - $window.document.body.scrollLeft;
-                var targetY = eventObj.pageY - (window.pageYOffset || $window.document.documentElement.scrollTop);
+                targetY = eventObj.pageY - ($window.pageYOffset ||
+                    $window.document.body.scrollTop ||
+                    $window.document.documentElement.scrollTop) -
+                    ($window.document.documentElement.clientTop || 0);
 
-                // Select the drag target. Because IE does not support CSS 'pointer-events: none', it will always
+                //Select the drag target. Because IE does not support CSS 'pointer-events: none', it will always
                 // pick the drag element itself as the target. To prevent this, we hide the drag element while
                 // selecting the target.
-                var displayElm;
                 if (angular.isFunction(dragElm.hide)) {
                   dragElm.hide();
-                }else{
+                } else {
                   displayElm = dragElm[0].style.display;
-                  dragElm[0].style.display = "none";
+                  dragElm[0].style.display = 'none';
                 }
 
-                // when using elementFromPoint() inside an iframe, you have to call
+                //When using elementFromPoint() inside an iframe, you have to call
                 // elementFromPoint() twice to make sure IE8 returns the correct value
+                //MDN: The elementFromPoint() method of the Document interface returns the topmost element at the specified coordinates.
                 $window.document.elementFromPoint(targetX, targetY);
 
-                var targetElm = angular.element($window.document.elementFromPoint(targetX, targetY));
+                //Set target element (element in specified x/y coordinates).
+                targetElm = angular.element($window.document.elementFromPoint(targetX, targetY));
+
+                //If the target element is a child element of a ui-tree-handle,
+                // use the containing handle element as target element
+                isHandleChild = UiTreeHelper.treeNodeHandlerContainerOfElement(targetElm);
+                if (isHandleChild) {
+                  targetElm = angular.element(isHandleChild);
+                }
+
                 if (angular.isFunction(dragElm.show)) {
                   dragElm.show();
-                }else{
+                } else {
                   dragElm[0].style.display = displayElm;
                 }
 
-                // move vertical
-                if (!pos.dirAx) {
-                  var targetBefore, targetNode;
-                  // check it's new position
-                  targetNode = targetElm.scope();
-                  var isEmpty = false;
+                //Assigning scope to target you are moving draggable over.
+                if (UiTreeHelper.elementIsTree(targetElm)) {
+                  targetNode = targetElm.controller('uiTree').scope;
+                } else if (UiTreeHelper.elementIsTreeNodeHandle(targetElm)) {
+                  targetNode = targetElm.controller('uiTreeHandle').scope;
+                } else if (UiTreeHelper.elementIsTreeNode(targetElm)) {
+                  targetNode = targetElm.controller('uiTreeNode').scope;
+                } else if (UiTreeHelper.elementIsTreeNodes(targetElm)) {
+                  targetNode = targetElm.controller('uiTreeNodes').scope;
+                } else if (UiTreeHelper.elementIsPlaceholder(targetElm)) {
+                  targetNode = targetElm.controller('uiTreeNodes').scope;
+                } else if (targetElm.controller('uiTreeNode')) {
+                  //Is a child element of a node.
+                  targetNode = targetElm.controller('uiTreeNode').scope;
+                }
+
+                moveWithinTree =  (targetNode && targetNode.$treeScope && targetNode.$treeScope.$id && targetNode.$treeScope.$id === treeOfOrigin);
+
+                /* (jcarter) Notes to developers:
+                 *  pos.dirAx is either 0 or 1
+                 *  1 means horizontal movement is happening
+                 *  0 means vertical movement is happening
+                 */
+
+                // Move nodes up and down in nesting level.
+                if (moveWithinTree && pos.dirAx) {
+
+                  // increase horizontal level if previous sibling exists and is not collapsed
+                  // example 1.1.1 becomes 1.2
+                  if (pos.distX > 0) {
+                    prev = dragInfo.prev();
+                    if (prev && !prev.collapsed
+                      && prev.accept(scope, prev.childNodesCount())) {
+                      prev.$childNodesScope.$element.append(placeElm);
+                      dragInfo.moveTo(prev.$childNodesScope, prev.childNodes(), prev.childNodesCount());
+                    }
+                  }
+
+                  // decrease horizontal level
+                  // example 1.2 become 1.1.1
+                  if (pos.distX < 0) {
+                    // we can't decrease a level if an item preceeds the current one
+                    next = dragInfo.next();
+                    if (!next) {
+                      target = dragInfo.parentNode(); // As a sibling of it's parent node
+                      if (target
+                        && target.$parentNodesScope.accept(scope, target.index() + 1)) {
+                        target.$element.after(placeElm);
+                        dragInfo.moveTo(target.$parentNodesScope, target.siblings(), target.index() + 1);
+                      }
+                    }
+                  }
+                } else { //Either in origin tree and moving horizontally OR you are moving within a new tree.
+
+                  //Check it's new position.
+                  isEmpty = false;
+
+                  //Exit if target is not a uiTree or child of one.
                   if (!targetNode) {
                     return;
                   }
-                  if (targetNode.$type == 'uiTree' && targetNode.dragEnabled) {
-                    isEmpty = targetNode.isEmpty(); // Check if it's empty tree
+
+                  //Show the placeholder if it was hidden for nodrop-enabled and this is a new tree
+                  if (targetNode.$treeScope && !targetNode.$parent.nodropEnabled && !targetNode.$treeScope.nodropEnabled) {
+                    placeElm.css('display', '');
                   }
-                  if (targetNode.$type == 'uiTreeHandle') {
+
+                  //Set whether target tree is empty or not.
+                  if (targetNode.$type === 'uiTree' && targetNode.dragEnabled) {
+                    isEmpty = targetNode.isEmpty();
+                  }
+
+                  //If target is a handle set new target to handle's node.
+                  if (targetNode.$type === 'uiTreeHandle') {
                     targetNode = targetNode.$nodeScope;
                   }
-                  if (targetNode.$type != 'uiTreeNode'
-                    && !isEmpty) { // Check if it is a uiTreeNode or it's an empty tree
+
+                  //Check if it is a uiTreeNode or it's an empty tree.
+                  if (targetNode.$type !== 'uiTreeNode' && !isEmpty) {
+
+                    // Allow node to return to its original position if no longer hovering over target
+                    if (config.appendChildOnHover) {
+                      next = dragInfo.next();
+                      if (!next && unhover) {
+                        target = dragInfo.parentNode();
+                        target.$element.after(placeElm);
+                        dragInfo.moveTo(target.$parentNodesScope, target.siblings(), target.index() + 1);
+                        unhover = false;
+                      }
+                    }
                     return;
                   }
 
-                  // if placeholder move from empty tree, reset it.
+                  //If placeholder move from empty tree, reset it.
                   if (treeScope && placeElm.parent()[0] != treeScope.$element[0]) {
                     treeScope.resetEmptyElement();
                     treeScope = null;
                   }
 
-                  if (isEmpty) { // it's an empty tree
+                  //It's an empty tree
+                  if (isEmpty) {
                     treeScope = targetNode;
                     if (targetNode.$nodesScope.accept(scope, 0)) {
                       targetNode.place(placeElm);
                       dragInfo.moveTo(targetNode.$nodesScope, targetNode.$nodesScope.childNodes(), 0);
                     }
-                  } else if (targetNode.dragEnabled()){ // drag enabled
-                    targetElm = targetNode.$element; // Get the element of ui-tree-node
-                    var targetOffset = $uiTreeHelper.offset(targetElm);
-                    targetBefore = targetNode.horizontal ? eventObj.pageX < (targetOffset.left + $uiTreeHelper.width(targetElm) / 2)
-                                                         : eventObj.pageY < (targetOffset.top + $uiTreeHelper.height(targetElm) / 2);
+                  //Not empty and drag enabled.
+                  } else if (targetNode.dragEnabled()) {
+
+                      //Setting/Resetting data for exanding on hover.
+                      if (angular.isDefined(scope.expandTimeoutOn) && scope.expandTimeoutOn !== targetNode.id) {
+                        $timeout.cancel(scope.expandTimeout);
+                        delete scope.expandTimeout;
+                        delete scope.expandTimeoutOn;
+
+                        scope.$callbacks.expandTimeoutCancel();
+                      }
+
+                      //Determining if expansion is needed.
+                      if (targetNode.collapsed) {
+                        if (scope.expandOnHover === true || (angular.isNumber(scope.expandOnHover) && scope.expandOnHover === 0)) {
+                          targetNode.collapsed = false;
+                          targetNode.$treeScope.$callbacks.toggle(false, targetNode);
+                        } else if (scope.expandOnHover !== false && angular.isNumber(scope.expandOnHover) && scope.expandOnHover > 0) {
+
+                          //Triggering expansion.
+                          if (angular.isUndefined(scope.expandTimeoutOn)) {
+                            scope.expandTimeoutOn = targetNode.$id;
+
+                            scope.$callbacks.expandTimeoutStart();
+                            scope.expandTimeout = $timeout(function()
+                            {
+                              scope.$callbacks.expandTimeoutEnd();
+                              targetNode.collapsed = false;
+                              targetNode.$treeScope.$callbacks.toggle(false, targetNode);
+                            }, scope.expandOnHover);
+                          }
+                        }
+                      }
+
+                    //Get the element of ui-tree-node
+                    targetElm = targetNode.$element;
+                    targetOffset = UiTreeHelper.offset(targetElm);
+                    targetHeight = UiTreeHelper.height(targetElm);
+                    targetChildElm = targetNode.$childNodesScope ? targetNode.$childNodesScope.$element : null;
+                    targetChildHeight = targetChildElm ? UiTreeHelper.height(targetChildElm) : 0;
+                    targetHeight -= targetChildHeight;
+                    targetBeforeBuffer = config.appendChildOnHover ? targetHeight * 0.25 : UiTreeHelper.height(targetElm) / 2;
+                    targetBefore = eventObj.pageY < (targetOffset.top + targetBeforeBuffer);
 
                     if (targetNode.$parentNodesScope.accept(scope, targetNode.index())) {
                       if (targetBefore) {
                         targetElm[0].parentNode.insertBefore(placeElm[0], targetElm[0]);
                         dragInfo.moveTo(targetNode.$parentNodesScope, targetNode.siblings(), targetNode.index());
                       } else {
-                        targetElm.after(placeElm);
-                        dragInfo.moveTo(targetNode.$parentNodesScope, targetNode.siblings(), targetNode.index() + 1);
+                        // Try to append as a child if dragged upwards onto targetNode
+                        if (config.appendChildOnHover && targetNode.accept(scope, targetNode.childNodesCount())) {
+                          targetNode.$childNodesScope.$element.prepend(placeElm);
+                          dragInfo.moveTo(targetNode.$childNodesScope, targetNode.childNodes(), 0);
+                          unhover = true;
+                        } else {
+                          targetElm.after(placeElm);
+                          dragInfo.moveTo(targetNode.$parentNodesScope, targetNode.siblings(), targetNode.index() + 1);
+                        }
                       }
-                    }
-                    else if (!targetBefore && targetNode.accept(scope, targetNode.childNodesCount())) { // we have to check if it can add the dragging node as a child
+
+                    //We have to check if it can add the dragging node as a child.
+                    } else if (!targetBefore && targetNode.accept(scope, targetNode.childNodesCount())) {
                       targetNode.$childNodesScope.$element.append(placeElm);
                       dragInfo.moveTo(targetNode.$childNodesScope, targetNode.childNodes(), targetNode.childNodesCount());
                     }
                   }
-
                 }
 
-                scope.$apply(function() {
-                  scope.$callbacks.dragMove(dragInfo.eventArgs(elements, pos));
+                //Triggering dragMove callback.
+                scope.$apply(function () {
+                  scope.$treeScope.$callbacks.dragMove(dragInfo.eventArgs(elements, pos));
                 });
               }
             };
 
-            var dragEnd = function(e) {
+            dragEnd = function (e) {
+
+              var dragEventArgs = dragInfo.eventArgs(elements, pos);
+
               e.preventDefault();
 
-              if (dragElm) {
-                scope.$treeScope.$apply(function() {
-                  scope.$callbacks.beforeDrop(dragInfo.eventArgs(elements, pos));
-                });
-                // roll back elements changed
-                hiddenPlaceElm.replaceWith(scope.$element);
-                placeElm.remove();
-
-                dragElm.remove();
-                dragElm = null;
-                if (scope.$$apply) {
-                  dragInfo.apply();
-                  scope.$treeScope.$apply(function() {
-                    scope.$callbacks.dropped(dragInfo.eventArgs(elements, pos));
-                  });
-                } else {
-                  bindDrag();
-                }
-                scope.$treeScope.$apply(function() {
-                  scope.$callbacks.dragStop(dragInfo.eventArgs(elements, pos));
-                });
-                scope.$$apply = false;
-                dragInfo = null;
+              //TODO(jcarter): Is dragStart need to be unbound?
+              unbindDragMoveEvents();
 
-              }
+              //This cancel the collapse/expand login running.
+              $timeout.cancel(scope.expandTimeout);
 
-              // Restore cursor in Opera 12.16 and IE
-              var oldCur = document.body.getAttribute('ui-tree-cursor');
-              if (oldCur !== null) {
-                $document.find('body').css({'cursor': oldCur});
-                document.body.removeAttribute('ui-tree-cursor');
-              }
+              scope.$treeScope.$apply(function () {
+                $q.when(scope.$treeScope.$callbacks.beforeDrop(dragEventArgs))
 
-              angular.element($document).unbind('touchend', dragEndEvent); // Mobile
-              angular.element($document).unbind('touchcancel', dragEndEvent); // Mobile
-              angular.element($document).unbind('touchmove', dragMoveEvent); // Mobile
-              angular.element($document).unbind('mouseup', dragEndEvent);
-              angular.element($document).unbind('mousemove', dragMoveEvent);
-              angular.element($window.document.body).unbind('mouseleave', dragCancelEvent);
+                     //Promise resolved (or callback didn't return false)
+                    .then(function (allowDrop) {
+                      if (allowDrop !== false && scope.$$allowNodeDrop) {
+                        //Node drop accepted.
+                        dragInfo.apply();
+
+                        //Fire the dropped callback only if the move was successful.
+                        scope.$treeScope.$callbacks.dropped(dragEventArgs);
+                      } else {
+                        //Drop canceled - revert the node to its original position.
+                        bindDragStartEvents();
+                      }
+                    })
+
+                    //Promise rejected - revert the node to its original position.
+                    .catch(function () {
+                      bindDragStartEvents();
+                    })
+                    .finally(function () {
+
+                      //Replace placeholder with newly dropped element.
+                      hiddenPlaceElm.replaceWith(scope.$element);
+                      placeElm.remove();
+
+                      //Remove drag element if still in DOM.
+                      if (dragElm) {
+                        dragElm.remove();
+                        dragElm = null;
+                      }
+
+                      //Fire dragStope callback.
+                      scope.$treeScope.$callbacks.dragStop(dragEventArgs);
+                      scope.$$allowNodeDrop = false;
+                      dragInfo = null;
+
+                      //Restore cursor in Opera 12.16 and IE
+                      var oldCur = document.body.getAttribute('ui-tree-cursor');
+                      if (oldCur !== null) {
+                        $document.find('body').css({'cursor': oldCur});
+                        document.body.removeAttribute('ui-tree-cursor');
+                      }
+                    });
+              });
             };
 
-            var dragStartEvent = function(e) {
+            dragStartEvent = function (e) {
               if (scope.dragEnabled()) {
                 dragStart(e);
               }
             };
 
-            var dragMoveEvent = function(e) {
+            dragMoveEvent = function (e) {
               dragMove(e);
             };
 
-            var dragEndEvent = function(e) {
-              scope.$$apply = true;
+            dragEndEvent = function (e) {
+              scope.$$allowNodeDrop = true;
               dragEnd(e);
             };
 
-            var dragCancelEvent = function(e) {
+            dragCancelEvent = function (e) {
               dragEnd(e);
             };
 
-            var bindDrag = function() {
+            dragDelay = (function () {
+              var to;
+
+              return {
+                exec: function (fn, ms) {
+                  if (!ms) {
+                    ms = 0;
+                  }
+                  this.cancel();
+                  to = $timeout(fn, ms);
+                },
+                cancel: function () {
+                  $timeout.cancel(to);
+                }
+              };
+            })();
+
+            keydownHandler = function (e) {
+              if (e.keyCode === 27) {
+                dragEndEvent(e);
+              }
+            };
+
+            /**
+             * Binds the mouse/touch events to enable drag start for this node.
+             */
+            //This is outside of bindDragMoveEvents because of the potential for a delay setting.
+            bindDragStartEvents = function () {
               element.bind('touchstart mousedown', function (e) {
-                dragDelaying = true;
-                dragStarted = false;
-                dragStartEvent(e);
-                dragTimer = $timeout(function(){dragDelaying = false;}, scope.dragDelay);
+                //Don't call drag delay if no delay was specified.
+                if (scope.dragDelay > 0) {
+                  dragDelay.exec(function () {
+                    dragStartEvent(e);
+                  }, scope.dragDelay);
+                } else {
+                  dragStartEvent(e);
+                }
               });
-              element.bind('touchend touchcancel mouseup',function(){$timeout.cancel(dragTimer);});
+              element.bind('touchend touchcancel mouseup', function () {
+                if (scope.dragDelay > 0) {
+                  dragDelay.cancel();
+                }
+              });
+            };
+            bindDragStartEvents();
+
+            /**
+             * Binds mouse/touch events that handle moving/dropping this dragged node
+             */
+            bindDragMoveEvents = function () {
+              angular.element($document).bind('touchend', dragEndEvent);
+              angular.element($document).bind('touchcancel', dragEndEvent);
+              angular.element($document).bind('touchmove', dragMoveEvent);
+              angular.element($document).bind('mouseup', dragEndEvent);
+              angular.element($document).bind('mousemove', dragMoveEvent);
+              angular.element($document).bind('mouseleave', dragCancelEvent);
+              angular.element($document).bind('keydown', keydownHandler);
             };
-            bindDrag();
 
-            angular.element($window.document.body).bind("keydown", function(e) {
-              if (e.keyCode == 27) {
-                scope.$$apply = false;
-                dragEnd(e);
+            /**
+             * Unbinds mouse/touch events that handle moving/dropping this dragged node.
+             */
+            unbindDragMoveEvents = function () {
+              angular.element($document).unbind('touchend', dragEndEvent);
+              angular.element($document).unbind('touchcancel', dragEndEvent);
+              angular.element($document).unbind('touchmove', dragMoveEvent);
+              angular.element($document).unbind('mouseup', dragEndEvent);
+              angular.element($document).unbind('mousemove', dragMoveEvent);
+              angular.element($document).unbind('mouseleave', dragCancelEvent);
+              angular.element($document).unbind('keydown', keydownHandler);
+            };
+          }
+        };
+      }
+    ]);
+})();
+
+(function () {
+  'use strict';
+
+  angular.module('ui.tree')
+    .directive('uiTreeNodes', ['treeConfig', '$window',
+      function (treeConfig) {
+        return {
+          require: ['ngModel', '?^uiTreeNode', '^uiTree'],
+          restrict: 'A',
+          scope: true,
+          controller: 'TreeNodesController',
+          link: function (scope, element, attrs, controllersArr) {
+
+            var config = {},
+                ngModel = controllersArr[0],
+                treeNodeCtrl = controllersArr[1],
+                treeCtrl = controllersArr[2];
+
+            angular.extend(config, treeConfig);
+            if (config.nodesClass) {
+              element.addClass(config.nodesClass);
+            }
+
+            if (treeNodeCtrl) {
+              treeNodeCtrl.scope.$childNodesScope = scope;
+              scope.$nodeScope = treeNodeCtrl.scope;
+            } else {
+              // find the root nodes if there is no parent node and have a parent ui-tree
+              treeCtrl.scope.$nodesScope = scope;
+            }
+            scope.$treeScope = treeCtrl.scope;
+
+            if (ngModel) {
+              ngModel.$render = function () {
+                scope.$modelValue = ngModel.$modelValue;
+              };
+            }
+
+            scope.$watch(function () {
+              return attrs.maxDepth;
+            }, function (val) {
+              if ((typeof val) == 'number') {
+                scope.maxDepth = val;
               }
             });
+
+            scope.$watch(function () {
+              return attrs.nodropEnabled;
+            }, function (newVal) {
+              if ((typeof newVal) != 'undefined') {
+                scope.nodropEnabled = true;
+              }
+            }, true);
+
           }
         };
       }
     ]);
-
 })();
 
 (function () {
   'use strict';
 
   angular.module('ui.tree')
-  .directive('uiTreeHandle', [ 'treeConfig', '$window',
-    function(treeConfig) {
-      return {
-        require: '^uiTreeNode',
-        restrict: 'A',
-        scope: true,
-        controller: 'TreeHandleController',
-        link: function(scope, element, attrs, treeNodeCtrl) {
-          var config = {};
-          angular.extend(config, treeConfig);
-          if (config.handleClass) {
-            element.addClass(config.handleClass);
-          }
-          // connect with the tree node.
-          if (scope != treeNodeCtrl.scope) {
-            scope.$nodeScope = treeNodeCtrl.scope;
-            treeNodeCtrl.scope.$handleScope = scope;
+
+  /**
+   * @ngdoc service
+   * @name ui.tree.service:UiTreeHelper
+   * @requires ng.$document
+   * @requires ng.$window
+   *
+   * @description
+   * angular-ui-tree.
+   */
+    .factory('UiTreeHelper', ['$document', '$window', 'treeConfig',
+      function ($document, $window, treeConfig) {
+        return {
+
+          /**
+           * A hashtable used to storage data of nodes
+           * @type {Object}
+           */
+          nodesData: {},
+
+          setNodeAttribute: function (scope, attrName, val) {
+            if (!scope.$modelValue) {
+              return null;
+            }
+            var data = this.nodesData[scope.$modelValue.$$hashKey];
+            if (!data) {
+              data = {};
+              this.nodesData[scope.$modelValue.$$hashKey] = data;
+            }
+            data[attrName] = val;
+          },
+
+          getNodeAttribute: function (scope, attrName) {
+            if (!scope.$modelValue) {
+              return null;
+            }
+            var data = this.nodesData[scope.$modelValue.$$hashKey];
+            if (data) {
+              return data[attrName];
+            }
+            return null;
+          },
+
+          /**
+           * @ngdoc method
+           * @methodOf ui.tree.service:$nodrag
+           * @param  {Object} targetElm angular element
+           * @return {Bool} check if the node can be dragged.
+           */
+          nodrag: function (targetElm) {
+            if (typeof targetElm.attr('data-nodrag') != 'undefined') {
+              return targetElm.attr('data-nodrag') !== 'false';
+            }
+            return false;
+          },
+
+          /**
+           * Get the event object for touches.
+           * 
+           * @param  {MouseEvent|TouchEvent} e MouseEvent or TouchEvent that kicked off dragX method.
+           * @return {MouseEvent|TouchEvent} Object returned as original event object.
+           */
+          eventObj: function (e) {
+            var obj = e;
+            if (e.targetTouches !== undefined) {
+              //Set obj equal to the first Touch object in the TouchList.
+              obj = e.targetTouches.item(0);
+            //Logic to set obj to original TouchEvent.
+            } else if (e.originalEvent !== undefined && e.originalEvent.targetTouches !== undefined) {
+              obj = e.originalEvent.targetTouches.item(0);
+            }
+            return obj;
+          },
+
+          /**
+           * Generate object used to store data about node being moved.
+           * 
+           * {angular.$scope} node Scope of the node that is being moved.
+           */
+          dragInfo: function (node) {
+            return {
+              source: node,
+              sourceInfo: {
+                cloneModel: node.$treeScope.cloneEnabled === true ? angular.copy(node.$modelValue) : undefined,
+                nodeScope: node,
+                index: node.index(),
+                nodesScope: node.$parentNodesScope
+              },
+              index: node.index(),
+
+              //Slice(0) just duplicates an array.
+              siblings: node.siblings().slice(0),
+              parent: node.$parentNodesScope,
+
+              //Reset parent to source parent.
+              resetParent: function() {
+                this.parent = node.$parentNodesScope;
+              },
+
+              //Move the node to a new position, determining where the node will be inserted to when dropped happens here.
+              moveTo: function (parent, siblings, index) {
+                this.parent = parent;
+
+                //Duplicate siblings array.
+                this.siblings = siblings.slice(0);
+
+                //If source node is in the target nodes
+                var i = this.siblings.indexOf(this.source);
+                if (i > -1) {
+                  this.siblings.splice(i, 1);
+                  if (this.source.index() < index) {
+                    index--;
+                  }
+                }
+
+                this.siblings.splice(index, 0, this.source);
+                this.index = index;
+              },
+
+              //Get parent nodes nodeScope.
+              parentNode: function () {
+                return this.parent.$nodeScope;
+              },
+
+              //Get previous sibling node.
+              prev: function () {
+                if (this.index > 0) {
+                  return this.siblings[this.index - 1];
+                }
+
+                return null;
+              },
+
+              //Get next sibling node.
+              next: function () {
+                if (this.index < this.siblings.length - 1) {
+                  return this.siblings[this.index + 1];
+                }
+
+                return null;
+              },
+
+              //Return what cloneEnabled is set to on uiTree.
+              isClone: function () {
+                return this.source.$treeScope.cloneEnabled === true;
+              },
+
+              //Returns a copy of node passed in.
+              clonedNode: function (node) {
+                return angular.copy(node);
+              },
+
+              //Returns true if parent or index have changed (move happened within any uiTree).
+              isDirty: function () {
+                return this.source.$parentNodesScope != this.parent ||
+                  this.source.index() != this.index;
+              },
+
+              //Return whether node has a new parent (set on moveTo method).
+              isForeign: function () {
+                return this.source.$treeScope !== this.parent.$treeScope;
+              },
+
+              //Sets arguments passed to user callbacks.
+              eventArgs: function (elements, pos) {
+                return {
+                  source: this.sourceInfo,
+                  dest: {
+                    index: this.index,
+                    nodesScope: this.parent
+                  },
+                  elements: elements,
+                  pos: pos
+                };
+              },
+
+              //Method that actually manipulates the node being moved.
+              apply: function () {
+
+                var nodeData = this.source.$modelValue;
+
+                //Nodrop enabled on tree or parent
+                if (this.parent.nodropEnabled || this.parent.$treeScope.nodropEnabled) {
+                  return;
+                }
+
+                //Node was dropped in the same place - do nothing.
+                if (!this.isDirty()) {
+                  return;
+                }
+
+                //CloneEnabled and cross-tree so copy and do not remove from source.
+                if (this.isClone() && this.isForeign()) {
+                  this.parent.insertNode(this.index, this.sourceInfo.cloneModel);
+                //Any other case, remove and reinsert.
+                } else {
+                  this.source.remove();
+                  this.parent.insertNode(this.index, nodeData);
+                }
+              }
+            };
+          },
+
+          /**
+           * @ngdoc method
+           * @name ui.tree#height
+           * @methodOf ui.tree.service:UiTreeHelper
+           *
+           * @description
+           * Get the height of an element.
+           *
+           * @param {Object} element Angular element.
+           * @returns {String} Height
+           */
+          height: function (element) {
+            return element.prop('scrollHeight');
+          },
+
+          /**
+           * @ngdoc method
+           * @name ui.tree#width
+           * @methodOf ui.tree.service:UiTreeHelper
+           *
+           * @description
+           * Get the width of an element.
+           *
+           * @param {Object} element Angular element.
+           * @returns {String} Width
+           */
+          width: function (element) {
+            return element.prop('scrollWidth');
+          },
+
+          /**
+           * @ngdoc method
+           * @name ui.tree#offset
+           * @methodOf ui.nestedSortable.service:UiTreeHelper
+           *
+           * @description
+           * Get the offset values of an element.
+           *
+           * @param {Object} element Angular element.
+           * @returns {Object} Object with properties width, height, top and left
+           */
+          offset: function (element) {
+            var boundingClientRect = element[0].getBoundingClientRect();
+
+            return {
+              width: element.prop('offsetWidth'),
+              height: element.prop('offsetHeight'),
+              top: boundingClientRect.top + ($window.pageYOffset || $document[0].body.scrollTop || $document[0].documentElement.scrollTop),
+              left: boundingClientRect.left + ($window.pageXOffset || $document[0].body.scrollLeft || $document[0].documentElement.scrollLeft)
+            };
+          },
+
+          /**
+           * @ngdoc method
+           * @name ui.tree#positionStarted
+           * @methodOf ui.tree.service:UiTreeHelper
+           *
+           * @description
+           * Get the start position of the target element according to the provided event properties.
+           *
+           * @param {Object} e Event
+           * @param {Object} target Target element
+           * @returns {Object} Object with properties offsetX, offsetY, startX, startY, nowX and dirX.
+           */
+          positionStarted: function (e, target) {
+            var pos = {},
+            pageX = e.pageX,
+            pageY = e.pageY;
+
+            //Check to set correct data for TouchEvents
+            if (e.originalEvent && e.originalEvent.touches && (e.originalEvent.touches.length > 0)) {
+              pageX = e.originalEvent.touches[0].pageX;
+              pageY = e.originalEvent.touches[0].pageY;
+            }
+            pos.offsetX = pageX - this.offset(target).left;
+            pos.offsetY = pageY - this.offset(target).top;
+            pos.startX = pos.lastX = pageX;
+            pos.startY = pos.lastY = pageY;
+            pos.nowX = pos.nowY = pos.distX = pos.distY = pos.dirAx = 0;
+            pos.dirX = pos.dirY = pos.lastDirX = pos.lastDirY = pos.distAxX = pos.distAxY = 0;
+            return pos;
+          },
+
+          positionMoved: function (e, pos, firstMoving) {
+
+            var pageX = e.pageX,
+            pageY = e.pageY,
+            newAx;
+
+            //If there are multiple touch points, choose one to use as X and Y.
+            if (e.originalEvent && e.originalEvent.touches && (e.originalEvent.touches.length > 0)) {
+              pageX = e.originalEvent.touches[0].pageX;
+              pageY = e.originalEvent.touches[0].pageY;
+            }
+
+            //Mouse position last event.
+            pos.lastX = pos.nowX;
+            pos.lastY = pos.nowY;
+
+            //Mouse position this event.
+            pos.nowX = pageX;
+            pos.nowY = pageY;
+
+            //Distance mouse moved between events.          
+            pos.distX = pos.nowX - pos.lastX;
+            pos.distY = pos.nowY - pos.lastY;
+
+            //Direction mouse was moving.           
+            pos.lastDirX = pos.dirX;
+            pos.lastDirY = pos.dirY;
+
+            //Direction mouse is now moving (on both axis).          
+            pos.dirX = pos.distX === 0 ? 0 : pos.distX > 0 ? 1 : -1;
+            pos.dirY = pos.distY === 0 ? 0 : pos.distY > 0 ? 1 : -1;
+
+            //Axis mouse is now moving on.         
+            newAx = Math.abs(pos.distX) > Math.abs(pos.distY) ? 1 : 0;
+
+            //Do nothing on first move.
+            if (firstMoving) {
+              pos.dirAx = newAx;
+              pos.moving = true;
+              return;
+            }
+
+            //Calc distance moved on this axis (and direction).          
+            if (pos.dirAx !== newAx) {
+              pos.distAxX = 0;
+              pos.distAxY = 0;
+            } else {
+              pos.distAxX += Math.abs(pos.distX);
+              if (pos.dirX !== 0 && pos.dirX !== pos.lastDirX) {
+                pos.distAxX = 0;
+              }
+              pos.distAxY += Math.abs(pos.distY);
+              if (pos.dirY !== 0 && pos.dirY !== pos.lastDirY) {
+                pos.distAxY = 0;
+              }
+            }
+            pos.dirAx = newAx;
+          },
+
+          elementIsTreeNode: function (element) {
+            return typeof element.attr('ui-tree-node') !== 'undefined';
+          },
+
+          elementIsTreeNodeHandle: function (element) {
+            return typeof element.attr('ui-tree-handle') !== 'undefined';
+          },
+          elementIsTree: function (element) {
+            return typeof element.attr('ui-tree') !== 'undefined';
+          },
+          elementIsTreeNodes: function (element) {
+            return typeof element.attr('ui-tree-nodes') !== 'undefined';
+          },
+          elementIsPlaceholder: function (element) {
+            return element.hasClass(treeConfig.placeholderClass);
+          },
+          elementContainsTreeNodeHandler: function (element) {
+            return element[0].querySelectorAll('[ui-tree-handle]').length >= 1;
+          },
+          treeNodeHandlerContainerOfElement: function (element) {
+            return findFirstParentElementWithAttribute('ui-tree-handle', element[0]);
           }
-        }
-      };
+        };
+      }
+    ]);
+
+  // TODO: optimize this loop
+  //(Jcarter): Suggest adding a parent element property on uiTree, then all these bubble
+  // to <html> can trigger to stop when they reach the parent.
+  function findFirstParentElementWithAttribute(attributeName, childObj) {
+    //Undefined if the mouse leaves the browser window
+    if (childObj === undefined) {
+      return null;
     }
-  ]);
-})();
+    var testObj = childObj.parentNode,
+    count = 1,
+    //Check for setAttribute due to exception thrown by Firefox when a node is dragged outside the browser window
+    res = (typeof testObj.setAttribute === 'function' && testObj.hasAttribute(attributeName)) ? testObj : null;
+    while (testObj && typeof testObj.setAttribute === 'function' && !testObj.hasAttribute(attributeName)) {
+      testObj = testObj.parentNode;
+      res = testObj;
+      //Stop once we reach top of page.
+      if (testObj === document.documentElement) {
+        res = null;
+        break;
+      }
+      count++;
+    }
+    return res;
+  }
+
+})();