title: Angular JS: Accessing a $scope.variable defined inside a $http.get block to use in another $http.get
body: <p>Right now, I am using $http.get on an online json data source. In my controller:</p>
  
  <pre><code>$http.get('source').success(function(data) {
    $scope.nextPageToken = data.nextPageToken;
    $scope.prevPageToken = data.prevPageToken;
  });
  </code></pre>
  
  <p>Getting the variable $scope.nextPageToken works fine. My HTML code for displaying it (for testing)</p>
  
  <pre><code>&lt;p&gt;{{nextPageToken}}&lt;/p&gt;
  </code></pre>
  
  <p>works and it displays correctly in the browser.
  But when I try to put use the variable $scope.nextPageToken in the controller </p>
  
  <pre><code>$http.get('source').success(function(data) {
    $scope.nextPageToken = data.nextPageToken;
    $scope.prevPageToken = data.prevPageToken;
  });
  $http.get('source&amp;pageToken=' + $scope.nextPageToken).success(function(data) {
    $scope.picture = data.thumbnail.url;
  });
  </code></pre>
  
  <p>The console in the console returns a bad request (400). It seems to be trying to reach the link 'source&amp;pageToken=undefined', which means that $scope.nextPageToken doesn't get evaluated or doesn't get passed to the $http.get parameter.</p>
  
  <p>This is strange because URL is correct when I define a string variable and concatenate it to the URL of the $http.get parameter. For example, it works when I try</p>
  
  <pre><code>this.key = 'someKey';
  $http.get('source&amp;key=' + this.key).success(function(data) {
    $scope.nextPageToken = data.nextPageToken;
    $scope.prevPageToken = data.prevPageToken;
  });
  </code></pre>
  
  <p>Could this be because I am trying to access a variable that is only accessible inside the $http.get function block? If so, how do I access the $scope.nextPageToken variable outside the block?</p>
  
  <p>Any help is appreciated. Thanks!</p>
  
  <p>edit (after basilikum's answer): I have also tried</p>
  
  <pre><code>this.someKey = 'stringKey';
  $http.get('source&amp;key=' + this.someKey).success(function(data) {
      $scope.nextPageToken = data.nextPageToken;
      $scope.prevPageToken = data.prevPageToken;
      $http.get('source&amp;pageToken=' + $scope.nextPageToken + '&amp;key' + this.someKey).success(function(data) {
          $scope.picture = data.thumbnail.url;
      });
  });
  </code></pre>
  
  <p>(this is a more specific example of the actual code I have)
  When I do this though, the error that I get is</p>
  
  <pre><code>TypeError: Cannot read property 'someKey' of undefined
  </code></pre>
  
  <p>I had already tried the nested $http.get inside another one, but I get another error completely, so I thought it was just creating more problems. Could anyone tell me what is going on here?</p>