Call function inside ng-repeat to retrieve value

I'm having this situation I'm iterating over a json response from an endpoint:

chunk of controller code:

$http({
    method: 'GET',
    url: 'http://mywebsite.com/api/v1/stores/'
}).
success(function(data, status, headers, config) {
    $scope.stores = data;
}).
error(function(data, status, headers, config) {
    $scope.name = 'Error!';
});

and on my html view side I've got this:

<tbody>
    <tr ng-repeat="store in stores">
        <td>{{store.name}}</td>
        <td> {{store.type}} </td>
        <td><span ng-repeat="client in retrieveClientName(store.client_id)">
                {{client.name}}
            </span>
        </td>
        <td>{{store.address}}</td>
    </tr>
</tbody>

As you can see I'm trying to retrieve the client name using a function that receives an store.client_id from the values inside the stores array. Normally using a function triggered by a ng-click will be easy but how can I achieve this "on the fly" while I'm iterating?. Because executing this I get a kind of infinite loop that breaks all apart.

here is the code of the function that returns client name on the controller side:

$scope.retrieveClientName = function(id) {
   $http({
          method: 'GET',
          url: 'http://mywebsite.com/api/v1/clients?client_id='+id
      }).
      success(function(data, status, headers, config) {
          return $scope.clients=data;
      }).
      error(function(data, status, headers, config) {
          $scope.name = 'Error!';
      });
    }

I have also try using mg-init directive

<td  ng-init="clients=retrieveClientName(store.client_id)"><span ng-repeat="client in clients">{{client.name}}</span></td>

One way would be get all data when you get the stores back

$http({
    method: 'GET',
    url: 'http://mywebsite.com/api/v1/stores/'
}).
success(function(data, status, headers, config) {
    $scope.stores = data;
    angular.forEach($scope.stores, function(store){
        $scope.retrieveClientName(store.client_id).then(function(clients){
             store.clients = clients;
        });
    });
}).
error(function(data, status, headers, config) {
    $scope.name = 'Error!';
});

---

Edit: I would change the structure a bit for cleaner code

$scope.retrieveClientName = function(store) { // pass in store so we can attach results here
   $http({
      method: 'GET',
      url: 'http://mywebsite.com/api/v1/clients?client_id='+store.client_id
   }).
   success(function(data, status, headers, config) {
      return store.clients = data; // attach result in object
   }).
   error(function(data, status, headers, config) {
      $scope.name = 'Error!';
   });
}

$http({
    method: 'GET',
    url: 'http://mywebsite.com/api/v1/stores/'
}).
success(function(data, status, headers, config) {
    $scope.stores = data;
    angular.forEach($scope.stores, function(store){
        $scope.retrieveClientName(store); // no need .then here
    });
}).
error(function(data, status, headers, config) {
    $scope.name = 'Error!';
});

<tbody>
    <tr ng-repeat="store in stores">
        <td>{{store.name}}</td>
        <td> {{store.type}} </td>
        <td><span ng-repeat="client in store.clients"> <!-- use data here -->
                {{client.name}}
            </span>
        </td>
        <td>{{store.address}}</td>
    </tr>
</tbody