Angular JS complex tree view - html

Question

I have a complex JSON. can I use this to create a tree view.Here is sample json. A project can have tasks, subprojects and can go to any depth.
$scope.data = [{
"id": 1,
"title": "node1",
"TaskNodes" : [
{
"id": 113,
"title": "Parent Task node1.1.3",
"TaskNodes": [{
"id": 1131,
"title": "Child Task node1.1.3",
"TaskNodes": []
}]
}
],
"nodes": [
{
"id": 11,
"title": "node1.1",
"TaskNodes" : [
{
"id": 112,
"title": "Task node1.1.2",
"TaskNodes": []
}
],
"nodes": [
{
"id": 111,
"title": "node1.1.1",
"nodes": []
}
]
},
{
"id": 12,
"title": "node1.2",
"nodes": []
}
],
}, {
"id": 2,
"title": "node2",
"nodes": [
{
"id": 21,
"title": "node2.1",
"nodes": []
},
{
"id": 22,
"title": "node2.2",
"nodes": []
}
],
}, {
"id": 3,
"title": "node3",
"nodes": [
{
"id": 31,
"title": "node3.1",
"nodes": []
}
],
}];
});
this is the render html using angular-ui-tree
<!-- Nested node template -->
<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" nodrag ng-click="toggle(this)"><span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span></a>
{{node.title}}
<a class="pull-right btn btn-danger btn-xs" nodrag ng-click="remove(this)"><span class="glyphicon glyphicon-remove"></span></a>
<a class="pull-right btn btn-primary btn-xs" nodrag ng-click="newSubItem(this)" style="margin-right: 8px;"><span class="glyphicon glyphicon-plus"></span></a>
</div>
<ol ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}">
<li ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodes_renderer.html'">
</li>
</ol>
</script>
<script type="text/ng-template" id="TaskNodes_renderer.html">
<div ui-tree-handle class="tree-node tree-node-content">
<a class="btn btn-success btn-xs" ng-if="TaskNode.TaskNodes && TaskNode.TaskNodes.length > 0" nodrag ng-click="toggle(this)"><span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span></a>
{{TaskNode.title}}
<a class="pull-right btn btn-danger btn-xs" nodrag ng-click="remove(this)"><span class="glyphicon glyphicon-remove"></span></a>
<a class="pull-right btn btn-primary btn-xs" nodrag ng-click="newSubItem(this)" style="margin-right: 8px;"><span class="glyphicon glyphicon-plus"></span></a>
</div>
<ol ui-tree-nodes="" ng-model="TaskNode.TaskNodes" ng-class="{hidden: collapsed}">
<li ng-repeat="TaskNode in TaskNode.TaskNodes" ui-tree-node ng-include="'TaskNodes_renderer.html'">
</li>
</ol>
</script>
<div ui-tree id="tree-root">
<ol ui-tree-nodes ng-model="data">
<li ng-repeat="TaskNode in data" ui-tree-node ng-include="'TaskNodes_renderer.html'"></li>
<li ng-repeat="node in data" ui-tree-node ng-include="'nodes_renderer.html'"></li>
</ol>
</div>
</div>
I need to create a tree view for this. i have found a lot of them for one children type but in my case its a double chidlren type.
Any help is appreciated. thanks.
Sanjeev