Edit in JSFiddle

<div ng-app="Example">
    
    <div ng-controller="TestController">

        <script type="text/ng-template" id="child.html">
            <span>{{child.name}}</span>
            <button ng-click="add(child)">Add</button>
            <ul ng-show="child.children">
                 <li ng-repeat="child in child.children" ng-include="'child.html'">
            </li>
            </ul>
        </script>
        
        <ul>
            <li ng-repeat="child in root.children" ng-include="'child.html'">
            </li>
        </ul>
        <button ng-click="add(root)">Add to List</button>
        <p>^ Click this to start the list</p>
    </div>
    
</div>

angular.module('Example', []).controller('TestController', [
    '$scope', 
    function ($scope) {
        $scope.root = {};
      
        $scope.add = function (item) {
            item.children = (item.children || []);
           
            var count = item.children.length + 1;
            
            item.children.push({
                name : 'Child ' + count
            })
        };
    }
]);