An Angularjs ui component that can sort nested lists and bind data, and it dosen't need to depend on jQuery.
144 people use it
Author: 648674? JimLiu
Submitted by: 648674? JimLiu

Angular UI Tree

Build Status

Angular UI Tree is an AngularJS UI component that can sort nested lists, provides drag & drop support and doesn't depend on jQuery.


  • Uses the native AngularJS scope for data binding
  • Sorted and move items through the entire tree
  • Prevent elements from accepting child nodes

Supported browsers

The Angular UI Tree is tested with the following browsers:

  • Chrome (stable)
  • Firefox
  • IE 8, 9 and 10

For IE8 support, make sure you do the following:


Watch the Tree component in action on the demo page.


  • Angularjs



  • Using bower to install it. bower install angular-ui-tree
  • Download from github.

Load CSS

Load the css file: angular-ui-tree.min.css in your application: html <link rel="stylesheet" href="bower_components/angular-ui-tree/angular-ui-tree.min.css">

Load Script

Load the script file: angular-ui-tree.js or angular-ui-tree.min.js in your application:


Add the sortable module as a dependency to your application module:

Injecting ui.tree, ui-tree-nodes and ui-tree-node to your html.

HTML View or Templates

Developing Notes: - Adding ui-tree to your root element of the tree. - Adding ui-tree-nodes to the elements which contain the nodes. ng-model is required, and it should be an array, so that the directive knows which model to bind and update. - Adding ui-tree-node to your node element, it always follows the ng-repeat attribute. - All ui-tree-nodes, ng-model, ui-tree-node are necessary. And they can be nested. - If you changed the datasource bound, sometimes you have to call $scope.$apply() to refresh the view, otherwise you will get an error Cannot read property '0' of undefined (Issue #32).

Unlimited nesting HTML View or Templates Example

Structure of angular-ui-tree



ui-tree is the root scope for a tree



Turn on dragging and dropping of nodes. - true (default): allow drag and drop - false: turn off drag and drop Example: turn on/off drag and drop. ```html



ui-tree-nodes is the container of nodes. Every ui-tree-node should have a ui-tree-nodes as it's container, a ui-tree-nodes can have multiple child nodes.



Turn off drop of nodes. It can be overwritten by $callbacks.accept. Example: turn off drop. html <ol ui-tree-nodes ng-model="nodes" data-nodrop> <li ng-repeat="node in nodes" ui-tree-node>{{node.title}}</li> </ol>

Properties of scope

$element (type: AngularElement)

The html element which bind with the ui-tree-nodes scope.

$modelValue (type: Object)

The data which bind with the scope.

$nodes (type: Array)

All it's child nodes. The type of child node is scope of ui-tree-node.

$nodeScope (type: Scope of ui-tree-node)

The scope of node which current ui-tree-nodes belongs to. For example:

The property $nodeScope of nodes 1.1 is node 1.1. The property $nodes of nodes 1.1 is [node 1.1.1, node 1.1.2]

$callbacks (type: Object)

$callbacks is a very important property for angular-ui-tree. When some special events trigger, the functions in $callbacks are called. The Callbacks can be passed through the directive. Example: js myAppModule.controller('MyController', function($scope) { $scope.treeNodesOptions = { accept: function(sourceNodeScope, destNodesScope, destIndex) { return true; }, }; }); html <ol ui-tree-nodes="treeNodesOptions" ng-model="nodes"> <li ng-repeat="node in nodes" ui-tree-node>{{node.title}}</li> </ol>

Methods of scope


Collapse all it's child nodes.


Expand all it's child nodes.

Methods in $callbacks


Check if the current dragging node can be dropped in the ui-tree-nodes.

Parameters: - sourceNodeScope: The scope of source node which is dragging. - destNodesScope: The scope of ui-tree-nodes which you want to drop in. - destIndex: The position you want to drop in.

Return If the nodes accept the current dragging node. - true Allow it to drop. - false Not allow.


The dragStart function is called when the user starts to drag the node. Parameters: - sourceNodeScope: The current dragging node. - elements: The dragging relative elements. + placeholder: The placeholder element. + drag: The dragging element. - pos: Position object.


The dragMove function is called when the user moves the node.

Parameters: Same as Parameters of dragStart.


The dragStop function is called when the user stop dragging the node.

Parameters: Same as Parameters of dragStart.


A node of a tree. Every ui-tree-node should have a ui-tree-nodes as it's container.



Turn off drag of node. Example: turn off drag. html <ol ui-tree-nodes ng-model="nodes"> <li ng-repeat="node in nodes" ui-tree-node data-nodrag>{{node.title}}</li> </ol>

Properties of scope

$element (type: AngularElement)

The html element which bind with the ui-tree-nodes scope.

$modelValue (type: Object)

The data which bind with the scope.

collapsed (type: Bool)

If the node is collapsed

  • true: Current node is collapsed;
  • false: Current node is expanded.
$parentNodeScope (type: Scope of ui-tree-node)

The scope of parent node.

$childNodesScope (type: Scope of ui-tree-nodes)

The scope of it's ui-tree-nodes.

$parentNodesScope (type: Scope of ui-tree-nodes)

The scope of it's parent ui-tree-nodes.

For example:

  • node 1.1.1.$parentNodeScope is node 1.1.
  • node 1.1.$childNodesScope is nodes 1.1.
  • node 1.1.$parentNodesScope is nodes 1.

Methods of scope


Collapse current node.


Expand current node.


Toggle current node.


Remove current node.

NgModules Link

Give us a like on ngmodules

Development environment setup



  • Grunt (task automation)
  • Bower (package management)


Run the commands below in the project root directory.

1. Install Grunt and Bower
2. Install project dependencies

Useful commands

Running a Local Development Web Server

To debug code and run end-to-end tests, it is often useful to have a local HTTP server. For this purpose, we have made available a local web server based on Node.js.

To start the web server, run:

To access the local server, enter the following URL into your web browser:

By default, it serves the contents of the demo project.

Building angular-ui-tree

To build angular-ui-tree, you use the following command.

This will generate non-minified and minified JavaScript files in the dist directory.

Run tests

You can run the tests once or continuous.

comments powered by Disqus
This page was last updated almost 3 years ago.