Creating and assembling elements manually is a foolproof method. By utilizing ng-repeat, the manual removal of elements is not necessary.

Check out the demonstration here: http://jsfiddle.net/KNM4q/113/

.directive('tree', function ($compile) {
return {
    restrict: 'E',
    terminal: true,
    scope: { val: '=', parentData:'=' },
    link: function (scope, element, attrs) {
        var template = '<span>{{val.text}}</span>';
        template += '<button ng-click="deleteMe()" ng-show="val.text">delete</button>';

        if (angular.isArray(scope.val.items)) {
            template += '<ul class="indent"><li ng-repeat="item in val.items"><tree val="item" parent-data="val.items"></tree></li></ul>';
        }
        scope.deleteMe = function(index) {
            if(scope.parentData) {
                var itemIndex = scope.parentData.indexOf(scope.val);
                scope.parentData.splice(itemIndex,1);
            }
            scope.val = {};
        };
        var newElement = angular.element(template);
        $compile(newElement)(scope);
        element.replaceWith(newElement);
    }
}
});

I came across a solution that may not be directly from the examples you provided, but it shares a similar concept. I needed a recursive directive and found an effective and simple solution that worked well for me.

module.directive("recursive", function($compile) {
    return {
        restrict: "EACM",
        priority: 100000,
        compile: function(tElement, tAttr) {
            var contents = tElement.contents().remove();
            var compiledContents;
            return function(scope, iElement, iAttr) {
                if(!compiledContents) {
                    compiledContents = $compile(contents);
                }
                iElement.append(
                    compiledContents(scope, 
                                     function(clone) {
                                         return clone; }));
            };
        }
    };
});

module.directive("tree", function() {
    return {
        scope: {tree: '='},
        template: '<p>{{ tree.text }}</p><ul><li ng-repeat="child in tree.children"><recursive><span tree="child"></span></recursive></li></ul>',
        compile: function() {
            return  function() {
            }
        }
    };
});​

To implement this, it is suggested to create the recursive directive and wrap it around the element calling for recursion.

Angular 1.5.x has simplified the process, eliminating the need for any more tricks or workarounds!

This breakthrough came about during my quest for a cleaner solution to a recursive directive. You can check it out here, offering support up to version 1.3.x.

angular.element(document).ready(function() {
  angular.module('mainApp', [])
    .controller('mainCtrl', mainCtrl)
    .directive('recurv', recurveDirective);

  angular.bootstrap(document, ['mainApp']);

  function recurveDirective() {
    return {
      template: '<ul><li ng-repeat="t in tree">{{t.sub}}<recurv tree="t.children"></recurv></li></ul>',
      scope: {
        tree: '='
      },
    }
  }

});

  function mainCtrl() {
    this.tree = [{
      title: '1',
      sub: 'coffee',
      children: [{
        title: '2.1',
        sub: 'mocha'
      }, {
        title: '2.2',
        sub: 'latte',
        children: [{
          title: '2.2.1',
          sub: 'iced latte'
        }]
      }, {
        title: '2.3',
        sub: 'expresso'
      }, ]
    }, {
      title: '2',
      sub: 'milk'
    }, {
      title: '3',
      sub: 'tea',
      children: [{
        title: '3.1',
        sub: 'green tea',
        children: [{
          title: '3.1.1',
          sub: 'green coffee',
          children: [{
            title: '3.1.1.1',
            sub: 'green milk',
            children: [{
              title: '3.1.1.1.1',
              sub: 'black tea'
            }]
          }]
        }]
      }]
    }];
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div>
  <div ng-controller="mainCtrl as vm">
    <recurv tree="vm.tree"></recurv>
  </div>
</div>

My journey with this issue has led me to try various workarounds, but I always end up revisiting it.

The existing service solution falls short for directives that can inject the service but doesn't work well for anonymous template fragments.

Other solutions rely on specific template structures and involve DOM manipulation within the directive, making them too rigid and prone to breaking.

However, I believe I've found a generic solution that tackles the recursion by creating its own directive. This new approach minimizes interference with other directives and allows for anonymous usage.

For a live demonstration, check out the example on plnkr: http://plnkr.co/edit/MSiwnDFD81HAOXWvQWIM

With the release of Angular 2.0 in preview, it's time to consider incorporating an Angular 2.0 alternative. This addition could prove beneficial for users in the future:

The main idea revolves around constructing a recursive template with a self reference:

<ul>
    <li *for="#dir of directories">

        <span><input type="checkbox" [checked]="dir.checked" (click)="dir.check()"    /></span> 
        <span (click)="dir.toggle()">{{ dir.name }}</span>

        <div *if="dir.expanded">
            <ul *for="#file of dir.files">
                {{file}}
            </ul>
            <tree-view [directories]="dir.directories"></tree-view>
        </div>
    </li>
</ul>

By binding a tree object to the template, you can witness the recursive nature seamlessly unfold. For a complete example, check out:

If you're looking for a simple workaround that doesn't involve using directives, I have a solution for you. While it may not be the traditional approach if you're used to relying on directives, it does offer a way to create a recursive GUI structure with parameterized sub-structures.

All you need to do is make use of ng-controller, ng-init, and ng-include. Assuming your controller is named "MyController," your template is in a file called myTemplate.html, and your controller has an initialization function called init that accepts arguments A, B, and C, you can implement the solution like this:

Inside myTemplate.html:

<div> 
    <div>Hello</div>
    <div ng-if="some-condition" ng-controller="Controller" ng-init="init(A, B, C)">
       <div ng-include="'myTemplate.html'"></div>
    </div>
</div>

I discovered by chance that this structure can be recursively applied in plain AngularJS without needing complex compilation processes. By following this design pattern, you can create recursive UI structures without any advanced setup.

Within your controller:

$scope.init = function(A, B, C) {
   // Process A, B, C
   $scope.D = A + B; // D can be passed to other controllers in myTemplate.html
} 

The only downside I see is the somewhat cumbersome syntax you'll have to work with.

If you're looking to implement unlimited depth nesting in Angular, consider using angular-recursion-injector. This tool allows for conditional nesting and recompilation only when necessary, making it a streamlined solution without any unnecessary complexity.

By utilizing the "--recursion" suffix in your code, you can achieve faster and simpler results compared to other options. Check out the repository for more information: https://github.com/knyga/angular-recursion-injector

<div class="node">
  <span>{{name}}</span>

  <node--recursion recursion-if="subNode" ng-model="subNode"></node--recursion>
</div>

I formulated a basic set of directives for recursion.

In my opinion, it is simpler than the solution presented here, and offers equal if not more flexibility, allowing us to avoid being restricted to using UL/LI structures, etc. Although using them would still be logical, the directives are not dependent on this.

A straightforward example would be:

<ul dx-start-with="rootNode">
  <li ng-repeat="node in $dxPrior.nodes">
    {{ node.name }}
    <ul dx-connect="node"/>
  </li>
</ul>

The 'dx-start-with' and 'dx-connect' implementation can be found at: https://github.com/dotJEM/angular-tree

This eliminates the need to create multiple directives for different layouts.

Creating a tree-view where nodes can be added or removed becomes quite simple. For example: http://codepen.io/anon/pen/BjXGbY?editors=1010

angular
  .module('demo', ['dotjem.angular.tree'])
  .controller('AppController', function($window) {

this.rootNode = {
  name: 'root node',
  children: [{
    name: 'child'
  }]
};

this.addNode = function(parent) {
  var name = $window.prompt("Node name: ", "node name here");
  parent.children = parent.children || [];
  parent.children.push({
    name: name
  });
}

this.removeNode = function(parent, child) {
  var index = parent.children.indexOf(child);
  if (index > -1) {
    parent.children.splice(index, 1);
  }
}

  });

<div ng-app="demo" ng-controller="AppController as app">
  HELLO TREE
  <ul dx-start-with="app.rootNode">
<li><button ng-click="app.addNode($dxPrior)">Add</button></li>
<li ng-repeat="node in $dxPrior.children">
  {{ node.name }} 
  <button ng-click="app.removeNode($dxPrior, node)">Remove</button>
  <ul dx-connect="node" />
</li>
  </ul>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
  <script src="https://rawgit.com/dotJEM/angular-tree-bower/master/dotjem-angular-tree.min.js"></script>

</div>

Subsequently, the controller and template could be encapsulated in its own directive if desired.