MVC- AngularJS Treeview

Today we are going to implement AngularJS Treeview with ASP.Net MVC application. AngularJS Treeview is a expandable node list that expand the child nodes whild selected.

  1. Compatible: Safari, Chrome, Firefox, Opera, IE8, IE9 and mobile browsers (Android, Chrome Mobile, iOS Safari)
  2. Clone: Use Git or checkout with SVN using the web URL.

Attributes of angular treeview are below.

  1. angular-treeview: the treeview directive.
  2. tree-id : each tree’s unique id.
  3. tree-model : the tree model on $scope.
  4. node-id : each node’s id.
  5. node-label : each node’s label.
  6. node-children: each node’s children.

Let’s get started with visual studio, create a new MVC project to experiment.


Install AngularJS and reference them to Layout page.


Let’s create a method to get all data from server with api.

// GET: api/Roles
public IHttpActionResult GetRoles()
    object[] objRole = null;
        objRole = (
                from rl in db.Roles
                where rl.ParentID == 1 && rl.Child == null
                select new
                    RoleID = rl.RoleID,
                    RoleName = rl.RoleName,
                    ParentID = rl.ParentID,
                    Child = rl.Child,
                    collapsed = true,
                    children = from cl in db.Roles
                                where cl.ParentID == rl.RoleID && cl.Child == 1
                                select new
                                    RoleID = cl.RoleID,
                                    RoleName = cl.RoleName,
                                    ParentID = cl.ParentID,
                                    Child = cl.Child,
                                    collapsed = true,
                                    children = from cld in db.Roles
                                                where cld.ParentID == cl.RoleID && cl.Child == 1
                                                select new
                                                    RoleID = cld.RoleID,
                                                    RoleName = cld.RoleName,
                                                    ParentID = cld.ParentID,
                                                    Child = cld.Child,
                                                    collapsed = true
    catch (Exception e)
    return Json(new

Check the JSON resulttr_3

Here you can see our server is responding with data. Now let’s bind this data to our UI to represent the tree.

Angular Controller:

(function () {

    //angular module
    var myApp = angular.module('myApp', ['angularTreeview']);

    myApp.controller('myController', function ($scope, $http) {
        function fetch() {
                method: 'GET',
                url: '/api/Roles'
            }).then(function successCallback(response) {
                $scope.roleList =;
            }, function errorCallback(response) {


Html View:

    ViewBag.Title = "Index";

<h2>Angular Treeview</h2>

<div ng-controller="myController" style="padding:20px;">
    <span><b>Selected Node</b> : {{ngTree.currentNode.RoleName}}</span>
    <hr />
    <div data-angular-treeview="true"

Out Put:


Source Code: I’ve uploaded the full source code to download/clone @github, Hope this will help 🙂


Since March 2011, have 8+ years of professional experience on software development, currently working as Senior Software Engineer at s3 Innovate Pte Ltd.

Leave a Reply

Your email address will not be published.