Логические проблемы с AngularJS и несколькими запросами $http

У меня есть приложение, которое сделает 2 запроса $http к внешнему API и получит 2 разных ответа JSON. Эти ответы будут заполнять ng-repeat, заголовки и т. д. Моя проблема в том, что я хочу включить третий запрос, зависящий от первых двух.

Вот так:

Я получаю исполнителя JSON и выпускаю JSON, а также использую artist.name и release.title для заполнения URL-адреса третьего запроса $http.

Пока мне удалось получить два первых запроса, и как только результаты отображаются в ng-repeat, с помощью ng-click я запускаю третий запрос и заполняю img ng-src.

Но моя проблема в том, что я хочу, чтобы img ng-src заполнялся автоматически без ng-click, поэтому функция, которая запускает третий запрос, должна запускаться сразу после двух первых запросов. Кроме того, в моей рабочей версии прямо сейчас img, который я получаю с помощью ng-click, будет заполнять все элементы в ng-repeat. Это означает, что у каждого предмета должен быть свой образ, а сейчас его нет.

Я создал рабочий плункер, если вы ищете музыкального исполнителя и нажимаете на результат, а затем на альбоме, вы увидите, что я имею в виду.

По сути, я думаю, что мне не хватает части логики, которая соберет все вместе и в правильном порядке запуска.

Какие-нибудь мысли?

My JS:

angular.module('myApp', ['ngResource'])

  function Ctrl($scope, $http) {
    var search = function(name) {
      if (name) {
        $http.get('http://api.discogs.com/database/search?type=artist&q='+ name +'&page=1&per_page=5').
          success(function(data3) {
            $scope.clicked = false;
            $scope.results = data3.results;
          });
      }
      $scope.reset = function () {
        $scope.sliding = false;
        $scope.name = undefined;
      }
    }
    $scope.$watch('name', search, true);

    $scope.getDetails = function (id) {
      $http.get('http://api.discogs.com/artists/' + id).
        success(function(data) {
            $scope.artist = data;
        });
      $http.get('http://api.discogs.com/artists/' + id + '/releases?page=1&per_page=100').
        success(function(data2) {
            $scope.releases = data2.releases;
        });
      $scope.clicked = true;
      $scope.sliding = true;
      $scope.getImages = function (title, name) {
        $http.get('http://ws.audioscrobbler.com/2.0/?method=album.getinfo&api_key=e8aefa857fc74255570c1ee62b01cdba&artist=' + name + '&album='+ title +'&format=json').
          success(function(data4) {
              $scope.images = data4;
          });
      }
    }


  };

Моя директива:

angular.module('myApp', ['ngResource'])

 .directive('artistData', function() {

      return{
          restrict: 'E',
          template: '<div class="col-md-8 col-md-offset-2"> \
                     <h1 ng-show="artist.name" class="artist-name">{{artist.name}}</h1>  \
                     <div class="header-border" ng-show="artist.name"></div> \
                     <input ng-show="artist.name" class="form-control" ng-model="album" /> \
                      <div class="col-md-3" ng-click="getImages(release.title, artist.name)" ng-repeat="release in releases | filter:album | filter:{ role: \'main\' }"><div class="release">{{release.title}}<img class="img-responsive" ng-src="{{images.album.image[2][\'#text\']}}" /></div></div> \
                     </div>',
          replace: true
      };
    })  

И мой HTML:

<div class="container">
  <div class="row" ng-controller="Ctrl">
    <div class="col-md-8 col-md-offset-2">
      <div class="intro">

        <div class="intro-text" ng-class="{'slide':sliding}">
          <h1>Howdy stranger!</h1>
          <h3>Use the form below to search for an artist and start building your record collection!</h3>
        </div>
        <input type="text" ng-model="name" class="form-control input-lg" ng-class="{'slide':sliding}" ng-focus="reset()" placeholder="Artist name"/>
      </div>
      <ul ng-hide="clicked" class="search-results">
        <li ng-repeat="result in results" ng-click="getDetails(result.id)">{{result.title}}</li>
      </ul>
    </div>
    <artist-data></artist-data>
  </div>  
</div>