title: AngularJS overlaps http.get results and limits them to 10 per page
body: <p>This happens to be my first angularJS application that fetches data from newsapi and displays all the result in an infinite scrolling pattern.
  I am getting data but not as expected, the new results overlap the previous ones and limits to 10 per page.</p>
  
  <p>please advice if i am doing something wrong.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"&gt;
  
  &lt;script 
   src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"&gt;
  &lt;/script&gt;
  
  &lt;body&gt;
  &lt;div class="w3-container" ng-app="myApp" ng-controller="myCtrl"&gt;
  &lt;p&gt;Today's News:&lt;/p&gt;
  &lt;div class="w3-card-4" style="width:100px margin:20px" ng-repeat="x in 
  source"&gt;
  &lt;img src="{{x.urlToImage}}" style="width:100%"&gt;
  &lt;div class="w3-container w3-center"&gt;
  &lt;h2&gt;&lt;a href="{{x.url}}" target="_blank"&gt;{{x.title}}&lt;/a&gt;&lt;/h2&gt;
  &lt;/div&gt;
  &lt;/div&gt;&lt;br&gt;&lt;br&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope, $http) {
  var websites = ["the-times-of-india", "google-news", "bbc-news", "mirror", 
  "reuters", "the-hindu", "the-new-york-times", "the-wall-street-journal"];
  for(var i=0; i&lt;websites.length;i++){
  $http.get("https://newsapi.org/v1/articles?source=" +websites[i] 
  +"&amp;apiKey=f483fa2a3f714981afbee1a1996545b4")
  .then(function(response) {
  $scope.source = response.data.articles;
  });
  }
  });
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>