AngularJS Treeview is taking too much time to load - angularjs

Question

I am having a angularjs treeview, it is working fine in all respects except the load time with a large data. In my case it is taking at-least 10 sec to load the tree which is obviously not acceptable. There is no issue with getting the data. The data I need to create the tree is coming in milliseconds but the tree creation time is high. I have tried few of things for that but nothing worked out.
Now, what I want is that, instead of creating the whole tree at the first time it should be created in parts like initially only the parent nodes should be shown and when the user clicks on any node then only the child nodes of that parent should be created. In this way we can reduce the size of tree model we are providing initially and thus the creation time will also be reduced. But now the problem is I don't know how to do this, because whatever I tried didn't worked. If anyone have any idea about that please help me.
If there is any other way to reduce the time, please tell me that also. I just want to load it within milliseconds.
Here is the HTML file:
<div class="nowrap"
style="height: 400px; overflow: scroll;">
<div data-angular-treeview="true"
data-tree-id="mytree"
data-tree-model="roleList"
data-node-id="id"
data-node-label="name"
data-node-children="children"
my-event="selectNode"
data-collapsed="true"
data-search-query="treeSearchQuery">
</div>
</div>
angular.treeview.js:
(function ( angular ) {
'use strict';
angular.module( 'angularTreeview', [] )
.directive( 'treeModel', ['$compile', function( $compile ) {
return {
restrict: 'A',
link: function ( scope, element, attrs ) {
//tree id
var treeId = attrs.treeId;
//tree model
var treeModel = attrs.treeModel;
//node id
var nodeId = attrs.nodeId || 'id';
//node label
var nodeLabel = attrs.nodeLabel || 'label';
//children
var nodeChildren = attrs.nodeChildren || 'children';
//tree template
var template =
'<ul>' +
'<li data-ng-repeat="node in ' + treeModel + '">' +
'<i class="collapsed" data-ng-show="node.' + nodeChildren
+ '.length && node.collapsed" data-ng-click="'
+ treeId + '.selectNodeHead(node)">
</i>' +
'<i class="expanded" data-ng-show="node.' + nodeChildren
+ '.length && !node.collapsed" data-ng-click="'
+ treeId + '.selectNodeHead(node)">
</i>' +
'<i class="normal" data-ng-hide="node.' + nodeChildren
+ '.length">
</i> ' +
'<span data-ng-class="node.selected" data-ng-click="'
+ treeId + '.selectNodeLabel(node)">{{node.' + nodeLabel
+ '}}
</span>' +
'<div data-ng-hide="node.collapsed" data-tree-id="' + treeId
+ '" data-tree-model="node.' + nodeChildren
+ '" data-node-id=' + nodeId + ' data-node-label='
+ nodeLabel + ' data-node-children=' + nodeChildren + '>
</div>' +
'</li>' +
'</ul>';
var event = attrs.myEvent;
//check tree id, tree model
if( treeId && treeModel ) {
//root node
if( attrs.angularTreeview ) {
//create tree object if not exists
scope[treeId] = scope[treeId] || {};
//if node head clicks,
scope[treeId].selectNodeHead = scope[treeId].selectNodeHead
|| function( selectedNode ){
//Collapse or Expand
selectedNode.collapsed = !selectedNode.collapsed;
};
//if node label clicks,
scope[treeId].selectNodeLabel = scope[treeId].selectNodeLabel
|| function( selectedNode ){
//remove highlight from previous node
if( scope[treeId].currentNode
&& scope[treeId].currentNode.selected ) {
scope[treeId].currentNode.selected = undefined;
}
//set highlight to selected node
selectedNode.selected = 'selected';
//set currentNode
scope[treeId].currentNode = selectedNode;
};
}
//Rendering template.
element.html('').append( $compile( template )( scope ) );
}
}
};
}]);
})( angular );
Controller:
rsBaseApp.controller('cascadingTreeCtrl', [
'$scope','rsSiteServerTreeViewFactory', function ($scope,rsSiteServerTreeViewFactory) {
$scope.getdata = function () {
rsSiteServerTreeViewFactory.get(function (response) {
$scope.roleList = response.data;
},
function (errorInfo) {
//alert("Some error occured");
});
}
$scope.getdata();
}
]);