AngularJS: nested list

Forked from: http://jsfiddle.net/vzvmS/40/

by mynameisdonald

HTML

<script type="text/ng-template"  id="my-tmpl">
    {{data.name}}
    <button class="btn" ng-click="add(data)">Add node</button>
    <button class="btn" ng-click="delete(data)" 
            ng-show="hasNodes(data)">Delete nodes</button>
    <ul>
        <li ng-repeat="data in data.nodes" ng-include="'my-tmpl'"></li>
    </ul>
</script>

<ul ng-controller="TreeController">
    <li ng-repeat="data in tree" ng-include="'my-tmpl'"></li>
</ul>

JavaScript

angular.module("myApp", []).
controller("TreeController", function($scope) {
    $scope.delete = function(data) {
        data.nodes = [];
    };
    $scope.add = function(data) {
        var post = data.nodes.length + 1;
        var newName = data.name + '-' + post;
        data.nodes.push({name: newName,nodes: []});
    };
    $scope.hasNodes = function(data) {
        return (data.nodes.length > 0)
    };
    $scope.tree = [{name: "Node", nodes: []}];
});