ng-click event for the expandable template in ui-grid

Question

ng-click event for the expandable template in ui-grid(expandable ui grid) is not working. But I don’t know how to bind the expandable template events. what if i am not using subgrid and just an expanded template with this buttons how can i access the data

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

app.controller('MainCtrl', ['$scope', '$http', '$log', '$timeout', function ($scope, $http, $log, $timeout) {

         $scope.showdiv = function(){
      $scope.templateURL = 'inline-edit.html';
 };
  $scope.gridOptions = {
    expandableRowTemplate: 'expandableRowTemplate.html',
    expandableRowHeight: 150,
    expandableRowScope: { 
      clickMeSub: function(){
        alert('hi');
      }
    },
    //subGridVariable will be available in subGrid scope

      onRegisterApi: function (gridApi) {
                    gridApi.expandable.on.rowExpandedStateChanged($scope, function (row) {
                        if (row.isExpanded) {
                            var data=[ your data
                            ];
                            row.entity.appScopeProvider= $scope.subScope;
                                                    row.entity.subData=[data[$scope.gridOptions.data.indexOf(row.entity)]];


                                    //row.entity.subData = data1;

                        }
                    });
                }
  }




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

Answer 1

Here is a working plunker of what you're trying to achieve.

Your expendablerowtemplate.html should just be a div using subgridoptions like those in html :

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

and the js :

data[i].subGridOptions = {
      columnDefs: [ {name:"Id", field:"id"},{name:"Name", field:"name"} ],
      data: data[i].friends
    }