AngularJS Tree Menu Example for Github　

Edit / Add Node.

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<div ng-app="myApp">
  <div ng-controller="myController">

    <div class="button_panel">
      <input type="button" value="EDIT NODE" data-ng-click="mode = 'editNode'" data-ng-disabled="!mytree.currentNode" /> <input type="button" value="ADD CHILD" data-ng-click="mode = 'addChild'" data-ng-disabled="!mytree.currentNode" />
        
        <div class="input_panel" data-ng-show="mode == 'editNode'">
          <h4>Selected Node</h4>
            <label>ID</label> <input data-ng-model="mytree.currentNode.id" disabled/><br />
            <label>Label</label> <input data-ng-model="mytree.currentNode.name" /><br />
            <input type="button" value="DONE" class="done_button" data-ng-click="done()">
        </div>
        
        <div class="input_panel" data-ng-show="mode == 'addChild'">
          <h4>New Node</h4>
            <label>ID</label> <input data-ng-model="temporaryNode.id" /><br />
            <label>Label</label> <input data-ng-model="temporaryNode.label" /><br />
            <input type="button" value="DONE" class="done_button" data-ng-click="addChildDone()">
        </div>
    </div>



    <!--
      [TREE attribute]
      angular-treeview: the treeview directive
      tree-id : each tree's unique id.
      tree-model : the tree model on $scope.
      node-id : each node's id
      node-label : each node's label
      node-children: each node's children
    -->
    <div
      data-angular-treeview="true"
      data-tree-id="mytree"
      data-tree-model="roleList">
    </div>

  </div>
</div>

CSS

/* angular.treeview */

div[data-angular-treeview] {
  /* prevent user selection */
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;

  /* default */
  font-family: Tahoma;
  font-size:13px;
  color: #555;
  text-decoration: none;
}

div[data-tree-model] ul {
  margin: 0;
  padding: 0;
  list-style: none; 
  border: none;
  overflow: hidden;
}

div[data-tree-model] li {
  position: relative;
  padding: 0 0 0 20px;
  line-height: 20px;
}

div[data-tree-model] li .expanded {
  padding: 1px 10px;
  background-image: url("http://cfile23.uf.tistory.com/image/205B973A50C13F4B19D9BD");
  background-repeat: no-repeat;
}

div[data-tree-model] li .collapsed {
  padding: 1px 10px;
  background-image: url("http://cfile23.uf.tistory.com/image/1459193A50C13F4B1B05FB");
  background-repeat: no-repeat;
}

div[data-tree-model] li .normal {
  padding: 1px 10px;
  background-image: url("http://cfile23.uf.tistory.com/image/165B663A50C13F4B196CCA");
  background-repeat: no-repeat;
}

div[data-tree-model] li i, div[data-tree-model] li span {
  cursor: pointer;
}

div[data-tree-model] li .selected {
  background-color: #aaddff;
  font-weight: bold;
  padding: 1px 5px;
}


/* example */
label {
    display: inline-block;
    width: 30px;
    padding: 0 10px;
    font-weight: bold;
}

.button_panel {
    margin:10px 0 30px 0; padding:10px; background-color:#EEEEEE; border-radius:5px; font:12px Tahoma;
}

.input_panel {
    padding: 10px 5px;
}

.done_button {
    margin-top: 10px;
}

JavaScript

(function(){
  
  //angular module
  var myApp = angular.module('myApp', ['angularTreeview']);

  //test controller
  myApp.controller('myController', function($scope){
      
    //temporary node
    $scope.temporaryNode = {
        children: []
    };
    
    //first data  
    $scope.response = [
		 {"id":1,"parent_id":0,"name":"Item-0"}, {"id":2,"parent_id":1,"name":"Item-1"}, {"id":3,"parent_id":2,"name":"Item-2"}, {"id":4,"parent_id":2,"name":"Item-4"}, {"id":5,"parent_id":2,"name":"Item-5"}, {"id":6,"parent_id":2,"name":"Item-6"}, {"id":7,"parent_id":2,"name":"Item-7"}, {"id":8,"parent_id":2,"name":"Item-8"}, {"id":9,"parent_id":2,"name":"Item-9"}, {"id":10,"parent_id":1,"name":"Item-3"}, {"id":11,"parent_id":10,"name":"Item-10"},
	];  

    unflatten = function( array, parent, tree ){
   
                tree = typeof tree !== 'undefined' ? tree : [];
                parent = typeof parent !== 'undefined' ? parent : { id: "0" };
                    
                var children = _.filter( array, function(child){ return child.parent_id == parent.id; });
                
                if( !_.isEmpty( children )  ){
                    if( parent.id == "0" || parent.id == null ){
                       tree = children;   
                    }else{
                       parent['children'] = children
                    }
                    _.each( children, function( child ){ unflatten( array, child ) } );                    
                }
                console.log(tree)
                return tree;
            }
                   
  	//test tree model
    $scope.roleList = unflatten($scope.response);
      
      $scope.done = function () {
          /* reset */
          $scope.mytree.currentNode.selected = undefined;
          $scope.mytree.currentNode = undefined;
          $scope.mode = undefined;
      };
      
      $scope.addChildDone = function () {
          /* add child */
          if( $scope.temporaryNode.id &&...