title: How can I extend an object after multiple requests in angularjs?
body: <p>I need to retrieve data from different sources, merge them all and then output all data.</p>
  
  <p>I know angular supports angular.extend() for this purpose, but I cannot make it work. I only can output the result of the last http request...</p>
  
  <p>Plunkr: <a href="http://plnkr.co/edit/7nq038nExDguK48cTI0w?p=preview" rel="nofollow">http://plnkr.co/edit/7nq038nExDguK48cTI0w?p=preview</a></p>
  
  <pre><code>var app = angular.module('plunker', []);
  
  app.controller('MainCtrl', function($scope,$http) { 
  
  $scope.user = {};
  $http.get('data3.json').success(function(result){
     console.log(result)
     angular.extend($scope.user, result)
  })
  
  $http.get('data2.json').success(function(result){
     console.log(result)
     angular.extend($scope.user, result)
  })
  
  $http.get('data.json').success(function(result){
     console.log(result)
     angular.extend($scope.user, result)
  })
  
  });  
  </code></pre>