AngularJS ng-repeat group by date formatting issues - angularjs

Question

I have a JSON array that I need to group by the date.
so using angular-filter I created this:
<ul ng-repeat="(key, value) in controller.collections.data | groupBy: 'plannedCollectionDate'">
Group name: {{ key | date: 'fullDate' }}
<li ng-repeat="item in value">
item: {{ item }}
</li>
</ul>
which is fine, but what I actually want to generate is a table. I tried this:
<div ng-repeat="(key, value) in controller.collections.data | groupBy: 'plannedCollectionDate' | orderBy: 'plannedCollectionDate'">
{{ key | date: 'fullDate' }}
<table class="table table-hover table-light">
<tbody>
<tr ng-repeat="collection in value | filter: controller.filter" ng-click="controller.select(collection)" ng-class="{ active: controller.isSelected(collection), warning: collection.status.id === 2, success: collection.status.id === 4, danger: collection.status.id === 5 }">
<td>
<div>{{ collection.supplierName }} {{ collection.description }}</div>
<div>to be collected by {{ collection.customerName }}</div>
</td>
<td>
<a ui-sref=".collect({ selected: [collection]})">{{ collection.status.name }}</a>
</td>
<td>
<button class="btn btn-danger" ng-click="controller.delete(collection.id)">
<span class="fa fa-close"></span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
which again works fine, it generates a table for each group though. What I would prefer is to have one table with a header for the groupBy dates and then trs for the inner repeat. I imagine I have to do something like ng-repeat-start but I can't get it to work.
Has anyone got any idea how to do what I need?

Answer 1

Actually this wasn't too hard to figure out.
I just changed the way I was thinking about the headers.
This is my solution:
<table class="table table-hover table-light">
<tbody ng-repeat="group in controller.collections.data | groupBy: 'plannedCollectionDate' | toArray: true | orderBy: '-plannedCollectionDate'">
<tr>
<th colspan="3">
{{ group.$key | date: 'fullDate' }}
</th>
</tr>
<tr ng-repeat="collection in group | filter: controller.filter" ng-click="controller.select(collection)" ng-class="{ active: controller.isSelected(collection), warning: collection.status.id === 2, success: collection.status.id === 4, danger: collection.status.id === 5 }">
<td>
<div>{{ collection.supplierName }} {{ collection.description }}</div>
<div>to be collected by {{ collection.customerName }}</div>
</td>
<td>
<a ui-sref=".collect({ selected: [collection]})">{{ collection.status.name }}</a>
</td>
<td>
<button class="btn btn-danger" ng-click="controller.delete(collection.id)">
<span class="fa fa-close"></span>
</button>
</td>
</tr>
</tbody>
</table>