AngularJS: ng-include inside ng-repeat

HTML

<script src="http://ci.angularjs.org/view/AngularJS/job/angular.js-angular-master/lastSuccessfulBuild/artifact/build/angular.js"></script>
<h3>{{vm.chapter.Title}}</h3>
<div ng-repeat="paragraph in vm.chapter.Paragraphs">
    <ng-include src="'paragraphtpl.html'"></ng-include>
</div>

<script type="text/ng-template" id="paragraphtpl.html">
  <a class="anchor" ng-attr-id="data.Id">{{paragraph.Id}}</a>
  <h4>{{paragraph.Title}}</h4>
  <div class="paragraph-text" ng-bind-html="data.Content"></div>
  <div ng-repeat="paragraph in paragraph.Paragraphs">      
      <ng-include src="'paragraphtpl.html'"></ng-include>
    </div>
</script>

JavaScript

function Controller($scope) {   
    
    $scope.log = function(m) {
        console.log(m);                
    };    
    
    $scope.vm = {};
    $scope.vm.chapter = {
            "Id": "N7313",
            "Title": "1 Chapter1",
            "Content": "<p>Contents1</p>",
            "Paragraphs": [
                {
                    "Id": "N1.1",
                    "Title": "1.1 Paragraph1.1",
                    "Content": "<p>Content2</p>",
                    "Paragraphs": [
                        {
                            "Id": "N1.1.1",
                            "Title": "1.1.1 Paragraph1.1.1",
                            "Content": "<p>ContentA</p>",
                            "Paragraphs": []
                        },
                        {
                            "Id": "N1.1.2",
                            "Title": "1.1.2 Paragraph1.1.2",
                            "Content": "<p>ContentB.</p>",
                            "Paragraphs": []
                        }
                    ]
                },
                {
                    "Id": "N1.2",
                    "Title": "1.2 Paragraph1.2",
                    "Content": "<p>Content3.</p>",
                    "Paragraphs": []
                }
            ]
        };
}