Recursive Templates in AngularJS

by Artem

HTML

<div ng-app="app" ng-controller='AppCtrl'>
  <script type="text/ng-template" id="categoryTree">
    {{ category.title }}
    <ul ng-if="category.categories">
      <li ng-repeat="category in category.categories" ng-include="'categoryTree'">
      </li>
    </ul>
  </script>
  <ul>
    <li ng-repeat="category in categories" ng-include="'categoryTree'"></li>
  </ul>
</div>

JavaScript

var app = angular.module('app', []);

app.controller('AppCtrl', function($scope) {



  $scope.categories = [{
      title: 'Computers',
      categories: [{
          title: 'Laptops',
          categories: [{
            title: 'Ultrabooks'
          }, {
            title: 'Macbooks'
          }]
        },

        {
          title: 'Desktops'
        },

        {
          title: 'Tablets',
          categories: [{
            title: 'Apple'
          }, {
            title: 'Android'
          }]
        }
      ]
    },

    {
      title: 'Printers'
    }

  ];

});