Recursive template using ng-include inside a directive template - angularjs

Question

Directive template :
<script type="text/ng-template" id="child-map.html">
<b ng-click="selectNode(child.id)">{{child.title}}</b>
<ul ng-if="child.children.length">
<li ng-repeat="child in child.children" ng-include="clild-map.html"></li>
</ul>
</script>
<b ng-click="selectNode(mapData.id)">{{mapData.title}}</b>
<ul ng-if="mapData.children.length">
<li ng-repeat="child in mapData.children" ng-include="child-map.html" ></li>
</ul>
Directive definition :
function widgetNodeMap () {
var nodeMap = {};
nodeMap.restrict = 'E'
nodeMap.scope = {
'mapData' : '=mapData'
}
nodeMap.controller = ['$scope',function($scope){
// $scope.currentNode = $scope.mapData.id;
$scope.selectNode = function(node_id){
$scope.currentNode = node_id;
}
$scope.getCurrentNode = function(){
return $scope.currentNode;
}
}];
nodeMap.templateUrl = '/static/app/components/widget/widget.view.node-map.html';
return nodeMap
}
Main template :
<widget-node-map map-data="navCtrl.mapData">
</widget-node-map>
But still i cannot get the data listed properly. Can you help me, where Im wrong?

Answer 1

I figured the solution
<script type="text/ng-template" id="child-map.html">
<ul ng-if="child.children.length">
<li ng-repeat="child in child.children">
<a ng-click="selectNode(child)">{{child.title}}</a>
<div ng-include src="'child-map.html'"></div>
</li>
</ul>
</script>
<div class="row">
<div class="col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2 col-sm-12 col-xs-12">
<a ng-click="selectNode(mapData)">{{mapData.title}}</a>
<ul ng-if="mapData.children.length">
<li ng-repeat="child in mapData.children">
<a ng-click="selectNode(child)">{{child.title}}</a>
<div ng-include src="'child-map.html'"></div>
</li>
</ul>
</div>
</div>