UI Grid Expandable option not showing

Question

I have been following this tutorial and struggling to get expandable rows to show in the UI.

My attempt so far has been. Data is populated by a click event.

AngularJS

angular.module("directives").controller("Controller", ["service", "$scope",
      function (service, $scope) {

      var GetRowTemplate = function()
      {
        var rowTemplate = '<div ui-grid="row.entity.subGridOptions" style="height:150px;"></div>'
        return rowTemplate;
      }

      $scope.gridOptions = {                  
        enableRowSelection: true,
        expandableRowTemplate: GetRowTemplate(),
        expandableRowHeight: 150,
        expandableRowScope: {
            subGridVariable: 'subGridScopeVariable'
          }
       }   
      
      $scope.gridOptions.columnDefs = [            
        { field: 'id'},
        { field: 'name'},
        { field: 'age'},
        { field: 'address.city'}
      ];

        $scope.filterData = function (valid) {
        if (valid)
        {
            var startDate = $scope.dateRange.startDate;
            var endDate = $scope.dateRange.endDateDate;
            
            var userId = $scope.selectedUser != undefined ? $scope.selectedUser.priceNetUserId : null;            
            var subWidgetId = $scope.selectedSubWidget != null ? $scope.selectedSubWidget.WidgetSubItems.subItemId.subItemId : 0;
            var widgetId = $scope.selectedWidget != undefined ? $scope.selectedWidget.id : 0;

            auditService.getFilterData(startDate, endDate, userId, widgetId, subWidgetId,
                function(data) {
                    for (var i = 0; i < data.length; i++)
                    {                                                                
                        data[i].subGridOptions = {
                            columnDefs: [{name: 'Id', field: 'id'}, {name: 'Name', 
                                          field: 'name'}],
                            data: data[i].friends,
                        };
                    }
                    $scope.gridOptions.data = data;
                });
              
               vm.gridOptions.onRegisterApi = function(gridApi){
                   vm.gridApi = gridApi;
               };

      }
}

HTML

<div ui-grid="gridOptions" ui-grid-pinning ui-grid-expandable class="grid"></div>

This is how the UI looks without the expandable rows

Gone through the tutorial few times and not able to figure out why it won't show the expandable rows?

Should look like this....