Error dealing with $q.all and promises in AngularJS

Question

Given the following code:

function Ctrl($scope, $http, $q) {
  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);

var done = $scope.getDetails = function (id) {
    $scope.clicked = true;
    $scope.sliding = true;
    var api = 'http://api.discogs.com/artists/';
    return $q.all([$http.get(api + id),
                  $http.get(api + id + '/releases?page=1&per_page=100')]);
};

done.then(function (){
 $scope.releases = data2.releases;
 $scope.artist = data;
 return $http.get('http://ws.audioscrobbler.com/2.0/?method=album.getinfo&api_key=e8aefa857fc74255570c1ee62b01cdba&artist=' + name + '&album='+ title +'&format=json');
});

I'm getting the following console error:

TypeError: Object function (id) {
    $scope.clicked = true;
    $scope.sliding = true;
    var api = 'http://api.discogs.com/artists/';
    return $q.all([$http.get(api + id),
                  $http.get(api + id + '/releases?page=...<omitted>... } has no method 'then'
at new Ctrl (file:///C:/Users/Zuh/Desktop/AngularJS%20Discogs/js/services.js:27:9)

Can anybody point me to where might the error be? I'm defining the .then after getDetails is executed...

Here's a working Plunker.

Answer 1

Here is your updated plunkr http://plnkr.co/edit/lTdnkRB1WfHqPusaJmg2?p=preview

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

  function Ctrl($scope, $http, $q) {
    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) {
            console.log(arguments)
            $scope.clicked = false;
            $scope.results = data3.results;
          });
      }
      $scope.reset = function () {
        $scope.sliding = false;
        $scope.name = undefined;
      };
    };
    $scope.$watch('name', search, true);

    var done = $scope.getDetails = function (id) {
        $scope.clicked = true;
        $scope.sliding = true;
        var api = 'http://api.discogs.com/artists/';
        var q =  $q.all([$http.get(api + id),
                      $http.get(api + id + '/releases?page=1&per_page=100')])
                  .then(function (ret){
                     //console.log(arguments)

                     $scope.releases = ret[1].data.releases;
                     $scope.artist = ret[0];
                     return $http.get('http://ws.audioscrobbler.com/2.0/?method=album.getinfo&api_key=e8aefa857fc74255570c1ee62b01cdba&artist=' + name + '&album='+ title +'&format=json');
                   })

        return q
      };

  }

To sum up fixes:

• move $q.all().then() part into done method

• pay more attention to what parameters handlers received in then part.