How to make couple of JSON Get request Angular JS

This is an interesting question. I'm using a simple JSON Get request to get all the competetions according to date, and show result as a list.

the JSON response is kind of :

[
{
"id":33
"competition":565 
},
{
"id":66
"competition":345
}
]

Then I should make another json request to get the name of each json item :

myserver.com/{id}

which look like :

{
"name":"Serie A"
}

I want to show a list of all the names of the competetions I have on the first json request according to date.

here is my angular js code for showing the list of a simple JSON request :

<div ng-controller="customersCtrl"> 

<ul>
  <li ng-repeat="m in matches">
    {{ m.id }}
  </li>
</ul>
</div>



<script>
var app = angular.module('starter', []);
app.controller('customersCtrl', function($scope, $http) {
  $http.get("http://Myserver.com/matches?date=2015-05-19")
  .success(function (response) {$scope.matches = response;});
</script>

You can iterate through the matches and get the names with a new call:

app.controller('customersCtrl', function($scope, $http) {
    $http.get("http://myserver.com/matches?date=2015-05-19")
        .success(function (response) {
            $scope.matches = response;
            for (var i = 0; i < response.length; i++) {
                setName($scope.matches, i);
            }
        });

    var setName = function (matches, index) {
        $http.get("http://myserver.com/" + matches[index].id)
            .success(function (response) {
                matches[index].name = response.name;
            });
    }
});

Below code will first fetch all the competitions and then using their ids it will fetch names all the events parallely. it will give all the competition with details in one go only.

Warning: If you have large numbers of all competition then it will make same number of calls to get competition details all of them. 

app.service('competition', function($http) {

  this.getAllCompetitions = function() {
    var baseUrl = 'http://Myserver.com';
    return $http.get(baseUrl + '/matches?date=2015-05-19')
      .then(function(allCompetitions) {
        /* sample `data`
          [
            {
                "id":33
                "competition":565 
            },
            {
                "id":66
                "competition":345
            }
          ]
        */
        var qArr = [];
        allCompetitions.forEach(function(competition, index) {
          var promise = $http.get(baseUrl + '/' + competition.id)
            .then(function(competitionDetail) {
              /* sample `competitionDetail`
                  {
                      "name":"Serie A"
                      "competition":565 
                  }
              */
              return {
                competitionDetail: competitionDetail,
                index: index
              };
            });
          aArr.push(promise);
        });

        return $q.all(qArr).then(function(listOfData) {
          listOfData.forEach(function(item) {
            allCompetitions[item.index] = angular.extend(allCompetitions[item.index], item.competitionDetail);
          });

          return allCompetitions;
        });
      });
  }

});