Get data based on a dynamic ID which is in loop - angularjs

Question

I want to get all the items for an order placed, like the following:
But I am getting all the items for all the orders inside a single order like the following:
Below is my html code for this:
<div class="container" data-ng-init="getorders()">
<div id="orderDiv" ng-repeat="orderrecords in orderdata">
<h5>Order ID: {{orderrecords.order_no}}</h5>
<h6><i class="fa fa-calendar"></i> Order Date: {{orderrecords.date_purchased}}</h6>
</div>
</div>
<div class="order-grid-body" data-ng-init="getorderdetails(orderrecords.order_id,'')">
<table class="table table-bordered orders">
<tr ng-repeat="ordrdatadesc in orderdatadesc">
<td>{{ordrdatadesc.product_name}}
</td>
</tr>
</table>
Below is my controller code:
angular.module('nshop').controller("orderController",['$scope','$localStorage','$http',function($scope,$localStorage,$http){
var noorder="You have not placed any orders";
var userid= $localStorage.user_id;
$scope.noorder="";
$scope.getorders=function(){
var formData = {
'userid':userid,
};
$http({
method : 'POST',
url : 'rest/getUserOrders',
data : formData
})
.success(function(data) {
if(data[0].status==1){
$scope.orderdata=data;
}
else{
$scope.noorder=noorder;
}
})
}
$scope.getorderdetails=function(orderid,status){
$scope.orderdatadesc="";
var formData = {
'orderid':orderid,
'status':status,
};
$http({
method : 'POST',
url : 'rest/getUserOrdersdetail',
data : formData
})
.success(function(data) {
$scope.orderdatadesc=data;
})
.error(function(data){
console.log('error');
});
}
}]);