How to use ui-grid with ng-repeat and angular-ui.bootstrap.collapse - angularjs

Question

I have a table where I use ng-repeat and angular-ui collapse to show data on it. I would like to implement ui-grid, but I'm not even near a solution.
Here's a Plunker of my code: https://plnkr.co/edit/mKeRaDv22WzBXjRT67oO?p=preview
The html code:
<div ng-controller="MyCtrl">
<table class="table table-striped">
<thead>
<tr>
<th style="width: 20%">A: </th>
<th style="width: 20%">B: </th>
<th style="width: 15%">C: </th>
<th style="width: 15%">D: </th>
<th style="width: 15%">E: </th>
<th style="width: 15%">F: </th>
</tr>
</thead>
<tbody ng-repeat="data in myData" ng-click="element.isCollapsed = !element.isCollapsed">
<tr>
<td>{{data.a}}</td>
<td>{{data.b}}</td>
<td>{{data.c}}</td>
<td>{{data.d}}</td>
<td>{{data.e}}</td>
<td>{{data.f}}</td>
<td></td>
</tr>
<tr collapse="element.isCollapsed" ng-show="element.isCollapsed">
<td colspan="2">{{data.g}} </td>
<td colspan="2">{{data.h}} </td>
<td colspan="2">{{data.i}} </td>
</tr>
<tr collapse="element.isCollapsed" ng-show="element.isCollapsed">
<td colspan="2">{{data.j}} </td>
<td colspan="2">{{data.k}} </td>
<td colspan="2">{{data.l}} </td>
</tr>
<tr collapse="element.isCollapsed" ng-show="element.isCollapsed">
<td colspan="6">{{data.m}} </td>
</tr>
</tbody>
</table>
</div>