AngularJS Treeview Example using Data from Controller

Treeview is a Classical fashion to display hierarchy of data. In less area using Treeview we can show large amount of data. Treeview works under parent child relationship. Parent is called node & the sub-items are called Child’s. Whether you do maintain a JSON file or Database AngularJS Treeview required relationship in Data.

In the below example I created an AngularJS Treeview using data from items object under $scope. Here Countries are the nodes & States are the Child’s. To design this demo here I have 3 files index.html, treeview.html & app.js. Index.html is the primary file where I refereed CDN link of AngularJS library. Treeview.html is the file where I am creating the template for treeview. App.js is the file where i implemented my logic’s to create a treeview using AngularJS. The module I create in app.js is treeview. Inside the module I have a directive called ngTree. In $scope I am assigning country & states as items. In items array country is the parent node when states are the child’s. In treeview.html using ng-click I am calling the function showStates(), which is in the $scope of app.js. This function helps to expand & collapse the nodes.

Angularjs Treeview Example

Angularjs Treeview Example

To run the below example Copy these code to notepad. Save it as index.html, treeview.html & app.js in a same folder. Before run the index.html make sure you are with Internet Connectivity.


<!DOCTYPE html>
<html ng-app="treeview">
<meta charset="utf-8">
<title>Example to Create Treeview using AngularJS</title>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="app.js"></script>


<li ng-repeat="item in items" ng-click="showStates(item)">
<li ng-repeat="subItem in item.states" ng-show="">


angular.module('treeview', [])
.directive('ngTree', function() {
return {
restrict: 'E',
transclude: true,

controller: function($scope) {

$scope.showStates = function(item){ = !;

$scope.items = [
country: "INDIA",
states: [
{state: "Assam"},
{state: "Chhattisgarh"},
{state: "Sikkim"},
{state: "Maharashtra"},
{state: "Madhya Pradesh"}
country: "UNITED STATES",
states: [
{state: "Alabama"},
{state: "California"},
{state: "Hawaii"},
{state: "Michigan"},
{state: "New York"},
{state: "Washington"}
country: "PAKISTAN",
states: [
{state: "Peshawar"},
{state: "Lahore"},
{state: "Karachi"},
{state: "Islamabad"}
templateUrl: 'treeview.htm'