Angular recursive template

Question

I have a directive with an item template that recursively references itself but is not properly rendering out children beyond the first level. I've looked at several examples and it seems my example only differs in that my items are loaded by page via AJAX requests. Below I've linked to an example of the problem.

http://plnkr.co/edit/16wf1MS7vbk3qH8tcE7q?p=preview

<div my-directive></div>

<script id="myDirectiveTemplate" type="text/ng-template">
    <h4>
        My directive
    </h4>
    <ul>
        <li ng-repeat="item in items" ng-include="'itemTemplate'"></li>
    </ul>
</script>

<script id="itemTemplate" type="text/ng-template">
    <p>
        {{ item.title }}
    </p>
    <ul ng-if="item.children.length">
        <li ng-repeat="child in item.children" ng-include="'itemTemplate'"></li>
    </ul>
</script>

My directive:

angular.module("myApp")
.directive("myDirective", ["$timeout", function ($timeout) {
var scope;

function loadPage() {
    // makes an ajax call here to get a page
    scope.items.push({ title: "Item 1", children: [] });
    scope.items.push({ title: "Item 2", children: [] });
    scope.items.push({
        title: "Item 3",
        children: [
            {
                title: "Child 1",
                children: []
            },
            {
                title: "Child 2",
                children: []
            }
        ]
    });
}

return {
    restrict: "A",
    templateUrl: "myDirectiveTemplate",

    controller: ["$scope", function ($scope) {
        $scope.items = [];
        scope = $scope;
    }],

    link: function (scope, element, attrs) {
        $timeout(function () {
            loadPage();
        });
    }
};
}]);

Answer 1

I have tweaked logic bit and here is your updated SAMPLE

    <script id="myDirectiveTemplate" type="text/ng-template">
          <ul>
            <li ng-repeat="item in items">
              {{item.title}}
              <div ng-if="item.children.length > 0" ng-include="'itemTemplate'"></div>
            </li>
          </ul>
    </script>

   <script type="text/ng-template" id="itemTemplate">
    <ul>
      <li ng-repeat="item in item.children">
          {{item.title}}
         <div ng-if="item.children.length > 0" ng-include="'itemTemplate'"></div>
      </li>
    </ul>
  </script>

OR you can try below solution

<script id="myDirectiveTemplate1" type="text/ng-template">
  <ul>
    <li ng-repeat="item in items" ng-include="'itemTemplateUpdated'"></li>
  </ul>
</script>

<script type="text/ng-template" id="itemTemplateUpdated">
  {{item.title}}
  <ul ng-if="item.children.length > 0">
      <li ng-repeat="item in item.children" ng-include="'itemTemplateUpdated'">
      </li>
  </ul>
</script>