ui-grid: Ui-Grid TreeView with hierarchical Json data unable to bind properly

Hi, I couldn’t build a tree using UI-Grid , please help me to fix this below is the code what i got:

I also have a heirarchial json which i need to use to build the treeview, below code is the controller code which i tried to use which i grabbed from the demo :

http://ui-grid.info/docs/#/tutorial/215_treeView

//Controller Code
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.treeView' ]);

app.controller('MainCtrl', ['$scope', '$http', '$interval', 'uiGridTreeViewConstants', function ($scope, $http, $interval, uiGridTreeViewConstants ) {
$scope.gridOptions = {
enableSorting: true,
enableFiltering: true,
showTreeExpandNoChildren: true,
columnDefs: [

  { name: 'id', width: '20%' },
  { name: 'parentId', width: '20%' },
  { name: 'name', width: '30%' }
],
};

var data = [
{
"id": 1,
"parentId": 1,
"name": "TopLoc1",
"children": [
{
"id": 2,
"parentId": 1,
"name": "Loc1 child",
"children": [
{
"id": 4,
"parentId": 2,
"name": "Loc2 child",
"children": []
}
]
},
{
"id": 3,
"parentId": 1,
"name": "Loc1 child",
"children": []
}
]
},
{
"id": 5,
"parentId": 5,
"name": "Top Loc 2",
"children": [
{
"id": 6,
"parentId": 5,
"name": "Loc5 child",
"children": [
{
"id": 8,
"parentId": 6,
"name": "Loc6 child",
"children": []
},
{
"id": 9,
"parentId": 6,
"name": "Loc5 child",
"children": []
},
{
"id": 10,
"parentId": 6,
"name": "Loc5 child",
"children": [
{
"id": 11,
"parentId": 10,
"name": "Loc10 child",
"children": [
{
"id": 12,
"parentId": 11,
"name": "Loc11 child",
"children": []
}
]
}
]
}
]
},
{
"id": 7,
"parentId": 5,
"name": "Loc5 child",
"children": []
}
]
}
];
$scope.gridOptions.data = data;
}]);

Please reply as early as you could, i am waiting on you, I really appreciate your help guys 😃