Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc8.js"></script>
<script type="text/ng-template" id="tree_item_renderer.html">

    <span ng-click="data.hide=!data.hide" style="display:inline-block; width:10px;">
        <span ng-show="data.hide && data.nodes.length > 0" class="fa fa-caret-right">+</span>
        <span ng-show="!data.hide && data.nodes.length > 0" class="fa fa-caret-down">-</span>
    </span>
    {{data.name}}
    <button ng-click="add(data)">Add node</button>
    <button ng-click="delete(data)" ng-show="data != tree[0]">Delete node</button>
    <ul ng-show="!data.hide" style="list-style-type: none; padding-left: 15px">
        <li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"></li>
    </ul>
</script>

<ul ng-app="Application" ng-controller="TreeController" style="list-style-type: none; padding-left: 0">
    <li ng-repeat="data in tree" ng-include="'tree_item_renderer.html'"></li>
</ul>

CSS

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

JavaScript

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