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">
  <a href="{{item.href}}" ng-class="{'nav-link nav-toggle': item.subItems && item.subItems.length > 0}">
    <span class="title">{{item.text}}</span>
  </a>
  <ul ng-if="item.subItems && item.subItems.length > 0" class="sub-menu">
    <li ng-repeat="item in item.subItems" ng-class="{'start': item.isStart, 'nav-item': item.isNavItem}" ng-include="'tree_item_renderer.html'"></li>
  </ul>
</script>

<div ng-app="myApp" ng-controller="TreeController">
  <ul class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200" ng-class="{'page-sidebar-menu-closed': settings.layout.pageSidebarClosed}">
    <li ng-repeat="item in menuItems" ng-class="{'start': item.isStart, 'nav-item': item.isNavItem}" ng-include="'tree_item_renderer.html'"></li>
  </ul>
</div>

CSS

ul {
  list-style: circle;
}

li {
  margin-left: 20px;
}

JavaScript

angular.module("myApp", []).controller("TreeController", ['$scope', function($scope) {


  $scope.menuItems = [{
    "isNavItem": true,
    "href": "#/dashboard.html",
    "text": "Dashboard"
  }, {
    "isNavItem": true,
    "href": "javascript:;",
    "text": "AngularJS Features",
    "subItems": [{
      "href": "#/ui_bootstrap.html",
      "text": " UI Bootstrap"
    }, {
      "isNavItem": true,
      "href": "javascript:;",
      "text": "AngularJS Features",
      "subItems": [{
        "href": "#/ui_bootstrap.html",
        "text": " UI Bootstrap"
      }]
    }]
  }, {
    "isNavItem": true,
    "href": "javascript:;",
    "text": "jQuery Plugins",
    "subItems": [{
      "href": "#/form-tools",
      "text": " Form Tools"
    }, {
      "isNavItem": true,
      "href": "javascript:;",
      "text": " Datatables",
      "subItems": [{
        "href": "#/datatables/managed.html",
        "text": " Managed Datatables"
      }]
    }]
  }];
}]);