Variable coming back undefined into the same scope in AngularJS

Question

Given the following code, I'm finding that once the loadDetails function (the last one) is being triggered, the ID variable comes back undefined, as on the other functions is coming back correctly.

Did I miss something?

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=7', {ignoreLoadingBar: true}).
        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=8').
      success(function(data2) {
          $scope.releases = data2.releases;
    });  

    $scope.$watch(function() {
      return $scope.artist;
    }, function() {
      var pos = $scope.artist.name.toLowerCase().indexOf(', the');
      if (pos != -1) {
        $scope.artist.name = 'The ' + $scope.artist.name.slice(0, pos);
      }
    });

    var _page = 0;
    $scope.releases = [];
    $scope.loadDetails = function(id) {
        _page++;
        console.log(_page);
        $http.get('http://api.discogs.com/artists/' + id + '/releases?page=' + _page + '&per_page=12').then(function(data2) {
            $scope.releases = data2.releases;
        });
    };    

    $scope.clicked = true;
    $scope.sliding = true;
  }

EDIT : Here's my view code:

<div class="infinite" infinite-scroll="loadDetails(artist.id)"> 
  <div class="col-xs-3 col-md-3 release" ng-controller="ImageCtrl" release="release" ng-repeat="release in releases | filter:album | filter:year" the-directive position="{{ $index + 1 }}" last="{{ $last }}">
      <img class="img-responsive" ng-src="{{image}}"/> {{release.title | characters:45}}
  </div>
  <div style='clear: both;'></div>
</div>

And the ng-Infinite-Scroll script that triggers the function when the containing div reaches the bottom:

/* ng-infinite-scroll - v1.0.0 - 2013-02-23 */
var mod;

mod = angular.module('infinite-scroll', []);

mod.directive('infiniteScroll', [
  '$rootScope', '$window', '$timeout', function($rootScope, $window, $timeout) {
    return {
      link: function(scope, elem, attrs) {
        var checkWhenEnabled, handler, scrollDistance, scrollEnabled;
        $window = angular.element($window);
        scrollDistance = 0;
        if (attrs.infiniteScrollDistance != null) {
          scope.$watch(attrs.infiniteScrollDistance, function(value) {
            return scrollDistance = parseInt(value, 10);
          });
        }
        scrollEnabled = true;
        checkWhenEnabled = false;
        if (attrs.infiniteScrollDisabled != null) {
          scope.$watch(attrs.infiniteScrollDisabled, function(value) {
            scrollEnabled = !value;
            if (scrollEnabled && checkWhenEnabled) {
              checkWhenEnabled = false;
              return handler();
            }
          });
        }
        handler = function() {
          var elementBottom, remaining, shouldScroll, windowBottom;
          windowBottom = $window.height() + $window.scrollTop();
          elementBottom = elem.offset().top + elem.height();
          remaining = elementBottom - windowBottom;
          shouldScroll = remaining <= $window.height() * scrollDistance;
          if (shouldScroll && scrollEnabled) {
            if ($rootScope.$$phase) {
              return scope.$eval(attrs.infiniteScroll);
            } else {
              return scope.$apply(attrs.infiniteScroll);
            }
          } else if (shouldScroll) {
            return checkWhenEnabled = true;
          }
        };
        $window.on('scroll', handler);
        scope.$on('$destroy', function() {
          return $window.off('scroll', handler);
        });
        return $timeout((function() {
          if (attrs.infiniteScrollImmediateCheck) {
            if (scope.$eval(attrs.infiniteScrollImmediateCheck)) {
              return handler();
            }
          } else {
            return handler();
          }
        }), 0);
      }
    };
  }
]);

Answer 1

rSo from what I read I understand you problem as in loadDetails() the id parameter is undefined. Where is loadDetails() called from? I assume its being called from the view. Are you passing this param in when it is being called? For ex:

<button ng-click="loadDetails('myId')">Load Details</button>

I would say your issue is you are not passing the param to this function. It would be helpful if you posted the view associated with this controller.