ui-tree demonstration (from LegislationLab.org)

law-index.html

<div ng-controller="LawIndexController" class="law-index" scroll-to-active-child>
  <h2>
    <a href ui-sref="site.law.overview">{{law | i18n:'title'}}</a>
  </h2>
  <div ui-tree drag-enabled="false">
    <ol ui-tree-nodes="" ng-model="law.nodes">
      <li
        ui-tree-node
        data-collapsed="true"
        ng-repeat="n in law.nodes"
        ng-init="depth=0"
        ng-include="'template:node-index-item'"></li>
    </ol>
  </div>
</div>

<!-- Nested node template -->
<script type="text/ng-template" id="template:node-index-item">
  <div ui-tree-handle ng-class="{'active': n === node}" id="{{n.slugChain}}" scroll-parent=".law-index">
    <i
      class="tree-toggler"
      ng-class="{
        'open': n.nodes.length && n.opened,
        'closed': n.nodes.length && !n.opened
      }"
      ng-click="toggleNode(this, n)"
    ></i>
    <a ng-href="{{n.href}}" class='node-title' ng-click="selectNode(this, n)">
      {{n.title}}
    </a>
  </div>
  <ol ui-tree-nodes="" ng-model="n.nodes" ng-class="{hidden: !n.opened }">
    <li
      ui-tree-node
      ng-repeat="n in n.nodes"
      ng-init="depth = depth + 1"
      data-collapsed="!n.opened"
      ng-include="'template:node-index-item'"></li>
  </ol>
</script>

law-index.js

'use strict';

(function() {
  angular.module('legislation-lab')
  .controller('LawIndexController', [
    '$scope',
    function ($scope) {

      $scope.selectNode = function (treeNode, n) {
        if (n.abstract) {
          return $scope.toggleNode(treeNode, n);
        }
      };

      $scope.toggleNode = function(treeNode, n) {
        treeNode.toggle();
        n.opened = !treeNode.collapsed;
      };

    }
  ]);
}());