Recursive template using ng-include inside a directive template

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>