AngularJS 1.2.x

var app = angular.module('plunker', [])
.directive('treeRoot', function() {
  return {
    restrict: 'E',
    template: '<tree-children children="root.children"></tree-children>',
    scope: {
      root: '='
    }
  }
})
.directive('treeChildren', function() {
  return {
    restrict: 'E',
    template: '<ul><li ng-repeat="child in children"><tree-child child="child"></tree-child></li></ul>',
    scope: {
      children: '='
    }
  }
})
.directive('treeChild', function($compile) {
  return {
    restrict: 'E',
    template: '<p>{{child.title}}</p><tree-children children="child.children"></tree-children>',
    scope: {
      child: '='
    },
    compile: function(tElement) {
      var contents = tElement.contents().remove();
      var compiledContents;
      return function postLink(scope, iElement, attrs, ctrl) {
        if (!compiledContents) {
          compiledContents = $compile(contents);
        }
        compiledContents(scope, function(clone) {
          iElement.append(clone);
        });

        //
      };
    }
  }
})
.controller('MainCtrl', function($scope) {
  $scope.root = {
    children: [{
      title: 'A',
      children: [{
        title: 'AA',
        children: [{
          title: 'AAA'
        }, {
          title: 'AAB'
        }, {
          title: 'AAC'
        }]
      }, {
        title: 'AB'
      }, {
        title: 'AC',
        children: [{
          title: 'ACA'
        }, {
          title: 'ACB'
        }, {
          title: 'ACC'
        }]
      }, {
        title: 'AD'
      }]
    }, {
      title: 'B',
      children: [{
        title: 'BA'
      }]
    }, {
      title: 'C'
    }, {
      title: 'D',
      children: [{
        title: 'DA'
      }, {
        title: 'DB',
        children: [{
          title: 'DBA'
        }, {
          title: 'DBB'
        }, {
          title: 'DBC'
        }, {
          title: 'DBD',
          children: [{
            title: 'DBDA'
          }, {
            title: 'DBDB'
          }]
        }]
      }, {
        title: 'DC'
      }, {
        title: 'DD'
      }]
    }]
  };
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.16/angular.js" data-semver="1.2.16"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <tree-root root="root"></tree-root>
  </body>

</html>

/* Put your css in here */