Veja no snippet abaixo:
angular
.module('app', [])
.controller('AppController', AppController);
function AppController() {
this.request_pending = obj;
}
var obj = {
URL_IMAGEM: "img/user.png",
CLIENTE: "BRUNO SILVA",
QTD_PEDIDOS: 1,
PRIMEIRO_PEDIDO: "01/01/2016 12:00:00",
PEDIDOS: [{
ENTREGA: {
RUA: 'RUA TESTE',
BAIRRO: 'BAIRRO TESTE',
NUMERO: 10,
CIDADE: 'CIDADE TESTE',
UF: 'SP'
},
PRODUTOS: [{
URL_IMAGEM: 'img/user.png',
PRODUTO: 'PRODUTO TESTE',
QTD: 10,
VALOR: 20,
TOTAL: 200
}, {
URL_IMAGEM: 'img/user.png',
PRODUTO: 'PRODUTO TESTE',
QTD: 10,
VALOR: 20,
TOTAL: 200
}],
TOTAL: 200,
TROCO_PARA: 300,
TROCO: 100,
OBS: '',
ID: 1
}, {
ENTREGA: {
RUA: 'RUA TESTE',
BAIRRO: 'BAIRRO TESTE',
NUMERO: 10,
CIDADE: 'CIDADE TESTE',
UF: 'SP'
},
PRODUTOS: [{
URL_IMAGEM: 'img/user.png',
PRODUTO: 'PRODUTO TESTE',
QTD: 10,
VALOR: 20,
TOTAL: 200
}, {
URL_IMAGEM: 'img/user.png',
PRODUTO: 'PRODUTO TESTE',
QTD: 10,
VALOR: 20,
TOTAL: 200
}, {
URL_IMAGEM: 'img/user.png',
PRODUTO: 'PRODUTO TESTE',
QTD: 10,
VALOR: 20,
TOTAL: 200
}, {
URL_IMAGEM: 'img/user.png',
PRODUTO: 'PRODUTO TESTE',
QTD: 10,
VALOR: 20,
TOTAL: 200
}],
TOTAL: 200,
TROCO_PARA: 300,
TROCO: 100,
OBS: '',
ID: 2
}]
};
<div ng-app="app" ng-controller="AppController as vm">
<ul class="nav nav-tabs">
<li ng-class="$index == 0 ? 'active' : ''" ng-repeat="r in vm.request_pending.PEDIDOS">
<a data-toggle="tab" data-target="#{{r.ID}}">#{{r.ID}}</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="{{r.ID}}" ng-repeat="r in vm.request_pending.PEDIDOS">
<h4>Produtos</h4>
<div class="table table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th style="text-align: center" class="tt">#</th>
<th>Imagem</th>
<th>Produto</th>
<th>Qtd</th>
<th>Valor</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in r.PRODUTOS">
<td style="text-align: center" ng-bind="$index+1"></td>
<td>
<img src="{{p.URL_IMAGEM}}">
</td>
<td ng-bind="p.PRODUTO"></td>
<td ng-bind="p.QTD"></td>
<td ng-bind="p.VALOR | currency"></td>
<td ng-bind="p.TOTAL | currency"></td>
</tr>
</tbody>
</table>
</div>
etc.
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
Considere, porém, usar a biblioteca angular-ui-bootstrap, que automatiza a criação desses componentes de UI interativos do bootstrap.
Criei um snippet no plunker para você ver funcionando.