Angular: Empty Fiddle

http://angularjs.org/

by itspers

HTML

<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<script type="text/ng-template"  id="tree_item_renderer.html">
    {{data.name}}
    <button class="btn btn-mini" ng-click="add(data)"><i class="icon-plus"></i></button>
    <button class="btn btn-mini" ng-click="delete(data)"><i class="icon-trash"></i></button>
    <ul>
        <li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"></li>
    </ul>
</script>

<ul ng-app="Application" ng-controller="TreeController">
    <li ng-repeat="data in tree" ng-include="'tree_item_renderer.html'"></li>
    <button class="btn btn-primary" ng-click="add_new()">Add node</button>    
</ul>

CSS

ul {
    list-style: circle;
}
li {
    margin-left: 20px;
}

JavaScript

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