ng-repeat not displaying inside modal - angularjs

Question

I have this modal here
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Details</h4>
</div>
<div class="modal-body">
<div class="row" ng-repeat="prods in products">
<div class="col-sm-4">
<p>#{{prods.pd }}</p>
</div>
<div class="col-sm-4">
<p>#{{ prods.quantity }}</p>
</div>
<div class="col-sm-4">
<p>#{{ prods.totalline }}</p>
</div>
</div>
</div>
</div>
</div>
</div>
I show my model clicking in a button
<button id="btn-add" class="btn btn-primary btn-sm" ng-click="toggle()"> View Details <i class="fa fa-plus" aria-hidden="true" style="margin-left: 50px; margin-right: 20px"></i></button>
And im trying to display some data.
My controller js is like this
app.controller('productDelivedController', function($scope, $http, API_URL) {
$scope.toggle = function() {
$http.get(API_URL + 'donation/listLines/1')
.success(function(response) {
$scope.products = response;
});
$('#myModal').modal('show');
}});
Probably im doing something wrong but i dont know what, im receiving the data correctly like i was supose to but i just cant update my modal with that data.

Answer 1

Please try the modal show code in success function, you are displaying the dialog, before data loaded.
If you show the modal after the data loaded, then the problem will not happed.
app.controller('productDelivedController', function($scope, $http, API_URL) {
$scope.toggle = function() {
$http.get(API_URL + 'donation/listLines/1')
.success(function(response) {
$scope.products = response;
$('#myModal').modal('show');
});
}});