Serialized Dropdown Lists - html

Question

I am struggling with the task of serializing dropdown lists. I am building an app that lets you order items and than you can view the orders. So each order has a list of items assigned to it. I am using AngularJS 1.6.9. This is the html page :
<div ng-app="ShowOrdersApp" ng-controller="mainCtrl" class="container">
<br><br>
<button ng-click="getOrders()"> Show Orders </button>
<br><br>
<table>
<tr>
<th > Orders </th>
</tr>
<tr ng-repeat="x in orderlist">
<td><label> No. {{x.id}} </label><br>
<label> Date and Time : {{x.timestamp}} </label><br>
<button class="btn btn-primary dropdown-toggle" ng-click="getOrderDetails(x.id)"> List of Items
<span class="caret"></span></button><br>
</td>
</tr>
</table>
</div>
On clicking the blue button I want it to show all the items assigned to particular order, but I have trouble creating the dropdown since number of orders may vary and number of items for each order may vary as well. How do I make it work ?

Answer 1

So, do i understood correctly - you want to show items from List of items in dropdown?
Try with this :
HTML:
<table>
<tr>
<th > Orders </th>
</tr>
<tr ng-repeat="x in data">
<td><label> No. {{x.id}} </label><br>
<label> Date and Time : {{x.date}} </label><br>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ng-click="getOrderDetails(x.id)"> List of Items
<span class="caret"></span></button><br>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" ng-repeat="item in x">
<a class="dropdown-item" style="display: block" ng-repeat="y in item">{{y.name}}</a>
</div></div>
</td>
</tr>
</table>
plunker: http://plnkr.co/edit/LZ8TF0MumSGPOXqFAkLm?p=preview