Hierarchy implementation in angularjs

I'm new to angularjs and want to implement some hierarchy screen in which user can add a new group, child to that group and so on. (parent/child hierarchy)

Something like this

1 Admin

1.1 -----User Admin

1.1.1 ----------Tech Support Admin

1.1.1.1 --------------------Tech Support Team

1.2 ----------Login Admin

1.2.1 --------------------Profiles

1.3 -----Client Admin

1.3.1 ----------Client 1

1.3.2 ----------Client 2

2 Users

2.1 -----User 1

2.2 -----User 2

2.3 -----User 3

I've searched some tutorials and the only solution I found out relative to my problem is angular ui tree.

But I'm not satisfied with that because I have to add images/avatar with all nodes (parents/children), then have to assign some roles to each of them on the basis of their parent node. but ui-tree does not have any procedure to add customized nodes or child of any node.

Is there any better approach to do this? Any kind of help will be appreciated.

Long time.. let me post my solution here..may be it helps someone else..

So basically I did this with the help of angular-ui-tree with some custom changes to add avatar and links etc. here is html code;

<div class="panel-body">
     <div class="col-sm-12">
        <div ui-tree id="tree-root" ng-if="data.length > 0" data-drop-enabled="false" data-drag-enabled="false" data-nodrop-enabled="true">
           <ol ui-tree-nodes ng-model="data">
              <li ng-repeat="node in data" ui-tree-node ng-include="'nodes_renderer.html'" ></li>
           </ol>
        </div>
     </div>
  </div>

and this is my script;

<script type="text/ng-template" id="nodes_renderer.html">

 <div ui-tree-handle class="tree-node tree-node-content">

   <a class="btn btn-success btn-xs" ng-if="node.nodes && node.nodes.length > 0" data-nodrag ng-click="toggle(this)"><span
   class="glyphicon"
   ng-class="{
     'glyphicon-chevron-right': collapsed,
     'glyphicon-chevron-down': !collapsed
   }"></span></a>

   <a class="btn btn-xs" data-nodrag>
       <img ng-src="{{node.image}}" class="img-avatar" alt="Avatar" height="35" width="35"></a>
   {{node.title}}


   <div class="dropdown pull-right ">
       <a class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown" data-nodrag><span class="glyphicon glyphicon-th-list"></span></a>
       <div class="dropdown-content dropdown-menu" data-nodrag>
           <a ng-show = "flagCreateUserHierarchy" ng-click="btnAddUserClick(this)"><i class="fa fa-user"></i> Add User</a>
           <a ng-show = "flagUpdateUserHierarchy" ng-click="btnEditClick(this)"><i class="fa fa-folder-open"></i> Edit</a>
           <a ng-show="{{node.type}} <2 && flagUpdateUserHierarchy" ng-click="btnEditGroupClick(this)"><i class="fa fa-folder-open"></i> Edit Group Name</a>
           <a ng-show = "flagUpdateUserHierarchy" ng-click="btnDeleteHierarchy(this)"><i class="fa fa-ban"></i> Delete</a>
       </div>
   </div>

and this is how it looks like...

I can further explain this whole procedure if anyone needs to understand.