angularjs - Angular Ui-Grid display List view on row expansion not a Subgrid and pass the selected row id and data -

i trying display list view on row expansion of ui-grid instead of sub-grid example when user clicks on expansion icon of row, instead of displaying subgrid want display list view, able point can call static list view within row unable pass data related row list

below working plunker http://plnkr.co/edit/pzl6ufwmg2h00sw36ftk?p=preview

this controller:

angular.module('availability',['ui.grid', 'ui.grid.expandable', 'ui.grid.selection', 'ui.grid.pinning','angular.filter'])  angular.module('availability').controller('availability.ctrl',                                                     ['$scope','$log','$rootscope',     function($scope,$log,$rootscope){           var weeklyavailability = {};         $scope.gridoptions = {             expandablerowtemplate: 'availability.detailed.view.tpl.html',             expandablerowheight: 150,             expandablerowscope: {                 rowidtobepassed : weeklyavailability             },             columndefs: [                 { field: 'email' }             ],              onregisterapi: function (gridapi) {                 gridapi.expandable.on.rowexpandedstatechanged($scope, function (row) {                     if (row.isexpanded) {                          //the below come server once id of worker in selected row                         var testdata = [                             {                                 "availabilitydate": "2015-04-01t04:18:51.080z",                                 "availabilityday": "wednesday",                                 "availabilitystarttime": "2015-04-01t05:18:51.105z",                                 "availabilityendtime": "2015-04-02t03:18:51.110z",                                 "available": false,                                 "id": "551b71d8921933a6cbc90495",                                 "workerid": "5500d45b1d1dff783e895f72"                             },                             {                                 "availabilitydate": "2015-04-01t04:18:51.080z",                                 "availabilityday": "wednesday",                                 "availabilitystarttime": "2015-04-01t06:18:51.105z",                                 "availabilityendtime": "2015-04-01t05:18:51.110z",                                 "available": false,                                 "id": "551b71d8921933a6cbc90496",                                 "workerid": "5500d45b1d1dff783e895f72"                             }                         ];                          //i want pass data receive server expanded scope                          //the below subdata present in availability.detailed.view.tpl.html                         //cant figure out way pass testdata field subdata                         $scope.subdata = testdata;                         //row.entity.weeklyavailability.data = testdata;                     }                 });             }          };    var workers =  [           {             "email": "worker@worker.com",             "id": "5500d45b1d1dff783e895f72"           },           {             "email": "worker2@worker.com",             "id": "550368c058b17f6ca096e397"           }       ]          $scope.gridoptions.data = workers;       }]); 

ui-grid uses isolated scope, when set $scope.subdata grid doesn't know it. can access controller's scope in template through grid.appscope property. show data:

<ul ng-repeat="(key, value) in grid.appscope.subdata | groupby: 'availabilityday'"> 

the problem you're using single scope variable rows, if have multiple rows expanded they'll show same data. there's couple ways properly:

1. you pre-populate "sub-data" after fetch initial data set. that's how expandable grid tutorial it.
2. however, looks want asynchornously fetch data when row expanded, in rowexpandedstatechanged need way data expanded row's scope. variable given row you'll have put on there. either in row or row.entity.

here's example:

<!-- expanded row template --> <ul ng-repeat="(key, value) in row.entity.subdata | groupby: 'availabilityday'"> 

// in rowexpandedstatechanged handler row.entity.subdata = testdata; 

i've forked plunker show how might work. note i've added randomized availabilityday show each row having different values: http://plnkr.co/edit/wd9iwlzobdydivnedjjm?p=preview