AngularJS 1.4.x

var app = angular.module('app', [ 'ui.grid', 'ui.grid.treeView' ]);
 
app.controller('MainCtrl', ['$scope',  'uiGridTreeViewConstants', function ($scope,  uiGridTreeViewConstants ) 
{
  $scope.name = 'World';
  
  $scope.data = [{field1:1}];
  
  $scope.gridOptions1 = {
    enableSorting: true,
    data:'data',
    onRegisterApi: function( gridApi ) {
      $scope.grid2Api = gridApi;
    },
    columnDefs: [
      {
        field: 'name',
      },
      {
        field: 'qty',
        treeAggregationType: uiGridTreeViewConstants.aggregation.COUNT,
      }
      
    ]
    
    
    
  };
  
  $scope.data = [{$$treeLevel:0}, {name:'test', qty:1}, {name:'test', qty:1}];
  
  $scope.add = function ()
  {
    $scope.data.splice(1,0,{name:'test', qty:1})
  };
  
}]);

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
<script data-require="jquery@2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>    
    <link data-require="ui-grid@3.0.7" data-semver="3.0.7" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.0.7/ui-grid.css" />
    <script data-require="angularjs@1.4.9" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.min.js"></script>
    <script data-require="bootstrap@~3.3.5" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script data-require="ui-grid@3.0.7" data-semver="3.0.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.0.7/ui-grid.js"></script>
    
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <button ng-click="add()" class="btn btn-success">add</button>
    <div id="grid1" ui-grid="gridOptions1" ui-grid-tree-view class="grid1"></div>
    <span>{{name}}</span>
  </body>

</html>

/* Put your css in here */

.grid1{
    position: absolute;
    height: 300px;
    width: auto;
    color: black;
    font-family: 'Segoe UI';
    top: 32px;
    left: 0;
    right: 0;
}