var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.expandable', 'ui.grid.selection', 'ui.grid.pinning']);

app.controller('MainCtrl', function MainCtrl($http, $log) {
  var vm = this;

  vm.gridOptions = {
    expandableRowTemplate: 'expandableRowTemplate.html',
    expandableRowHeight: 150,
    //subGridVariable will be available in subGrid scope
    expandableRowScope: {
      subGridVariable: 'subGridScopeVariable'
    }
  };

  vm.gridOptions.columnDefs = [
    { name: 'id' },
    { name: 'name'},
    { name: 'age'},
    { name: 'address.city'}
  ];

  $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
    .then(function(response) {
      var data = response.data;

      for(i = 0; i < data.length; i++){
        data[i].subGridOptions = {
          columnDefs: [{name: 'Id', field: 'id'}, {name: 'Name', field: 'name'}],
          data: data[i].friends
        };
      }
      vm.gridOptions.data = data;
    });

    vm.gridOptions.onRegisterApi = function(gridApi){
      vm.gridApi = gridApi;
    };

    vm.expandAllRows = function() {
      vm.gridApi.expandable.expandAllRows();
    };

    vm.collapseAllRows = function() {
      vm.gridApi.expandable.collapseAllRows();
    };

    vm.toggleExpandAllBtn = function() {
      vm.gridOptions.showExpandAllButton = !vm.gridOptions.showExpandAllButton;
    };
});

app.controller('SecondCtrl', function SecondCtrl($http, $log) {
		var vm = this;

		vm.gridOptions = {
				enableRowSelection: true,
				expandableRowTemplate: 'expandableRowTemplate.html',
				expandableRowHeight: 150
		}

		vm.gridOptions.columnDefs = [
				{ name: 'id', pinnedLeft:true },
				{ name: 'name'},
				{ name: 'age'},
				{ name: 'address.city'}
		];

		$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
				.then(function(response) {
						var data = response.data;

						for(i = 0; i < data.length; i++) {
								data[i].subGridOptions = {
										columnDefs: [{name: 'Id', field: 'id'}, {name: 'Name', field: 'name'}],
										data: data[i].friends
								};
						}
						vm.gridOptions.data = data;
				});
});

app.controller('ThirdCtrl', function ThirdCtrl($scope, $http, $log) {
		var vm = this;

		vm.gridOptions = {
				expandableRowTemplate: 'expandableRowTemplate.html',
				expandableRowHeight: 150,
				onRegisterApi: function (gridApi) {
						gridApi.expandable.on.rowExpandedStateChanged($scope, function (row) {
								if (row.isExpanded) {
										row.entity.subGridOptions = {
												columnDefs: [
												{ name: 'name'},
												{ name: 'gender'},
												{ name: 'company'}
										]};

										$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
												.then(function(response) {
														row.entity.subGridOptions.data = response.data;
												});
								}
						});
				}
		};

		vm.gridOptions.columnDefs = [
				{ name: 'id', pinnedLeft:true },
				{ name: 'name'},
				{ name: 'age'},
				{ name: 'address.city'}
		];

		$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
				.then(function(response) {
						vm.gridOptions.data = response.data;
				});
});

app.controller('FourthCtrl', function FourthCtrl($http, $log) {
		var vm = this;

		vm.gridOptions = {
				enableRowSelection: true,
				enableRowHeaderSelection: false,
				expandableRowTemplate: 'expandableRowTemplate.html',
				expandableRowHeight: 150
		};

		vm.gridOptions.columnDefs = [
				{ name: 'id', pinnedLeft:true },
				{ name: 'name'},
				{ name: 'age'},
				{ name: 'address.city'}
		];

		$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
				.then(function(response) {
						var data = response.data;

						for(i = 0; i < data.length; i++) {
								data[i].subGridOptions = {
										columnDefs: [{name: 'Id', field: 'id'}, {name: 'Name', field: 'name'}],
										data: data[i].friends,
										disableRowExpandable : (i % 2 === 0)
								};
						}
						vm.gridOptions.data = data;
				});
});

.grid {
  width: 100%;
  height: 400px;
}

<div ui-grid="row.entity.subGridOptions" style="height:150px;"></div>

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-animate.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-aria.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/lodash.min.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/jszip.min.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/excel-builder.dist.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>
Retrieve data for subGrid when expanding
Toggle expand subGrid control
<div ng-controller="FourthCtrl as fourth">
   <div ui-grid="fourth.gridOptions" ui-grid-expandable ui-grid-selection class="grid"></div>
</div>


    <script src="app.js"></script>
  </body>
</html>