using ng-repeat with api json in a for-loop - angularjs

Question

I am developing a mini app using angularjs that would grab data from a news api. I have succeeded in getting an array of 10(just the amount i want) articles from the array of 10 news sources( all provided by the api) using a for-loop(below). The problem is that the ng-repeat in the view only displays the last iteration of the loop. How can i get it to display all the iterations?
here is the controller:
angular.module('newsApp',[])
.controller('newsController',['$scope','$http', function($scope,$http){
var index = 0;
var sortby = ['top','latest','popular'];
$http.get('https://newsapi.org/v1/sources?language=en').then(function(response){
var sourceIdArray = [];
var articlesArray = [];
for (var i = 0; i < 9; i++) {
$scope.getId = response.data.sources[i].id;
sourceIdArray.push($scope.getId);
$http.get(' https://newsapi.org/v1/articles?source=' + sourceIdArray[i] + '&apiKey=53bec2b512724f58b92203f0f7e93dc1').then(function(response){
$scope.comits = response.data.articles
articlesArray.push($scope.comits);
});
}
})
}])
The loop gives me all the required articles but i don't know how to write the ng-repeat to display all the data instead of only the last iteration
and the html:
<div class="row rowdiv" ng-repeat="comit in comits" ng-if="$index % 2 == 0">
<div class="col-md-6">
<img ng-src="{{comits[$index].urlToImage}}" alt="">
<h3><a ng-href="{{comits[$index].url}}">{{comits[$index].title}}</a></h3>
<p>{{comits[$index].description}}</p>
<h5>{{result}} {{comits[$index].author}}</h5>
<h6 class="pull-right">{{comits[$index].publishedAt}}</h6>
</div>
<div class="col-md-6">
<img ng-src="{{comits[$index +1].urlToImage}}" alt="">
<h3><a ng-href="{{comits[$index +1].url}}">{{comits[$index +1].title}}</a></h3>
<p>{{comits[$index + 1].description}}</p>
<h5>{{result}} {{comits[$index + 1].author}}</h5>
<h6 class="pull-right">{{comits[$index +1].publishedAt}}</h6>
</div>
</div>
any help would be appreciated!

Answer 1

You are pushing the articles into the articlesArray with articlesArray.push($scope.comits);
You need to make articlesArray a member of $scope, then access it with ng-repeat. $scope.comits only contains the last article retrieved based on your code.
Or declare comits as $scope.comits = [] then change $scope.comits = response.data.articles to $scope.comits.push(response.data.articles)