title: AngularJS getting JSON data from external URL
body: <p>Here is the URL, which in the browser renders as JSON:</p>
  
  <p><a href="http://api.geosvc.com/rest/US/84606/nearby?apikey=4ff687893a7b468cb520b3c4e967c4da&amp;d=20&amp;pt=PostalCode&amp;format=json" rel="nofollow">http://api.geosvc.com/rest/US/84606/nearby?apikey=4ff687893a7b468cb520b3c4e967c4da&amp;d=20&amp;pt=PostalCode&amp;format=json</a></p>
  
  <p>Here is what I tried to store the data in a variable:</p>
  
  <pre><code>$http.get('http://api.geosvc.com/rest/US/84606/nearby?apikey=4ff687893a7b468cb520b3c4e967c4da&amp;d=20&amp;pt=PostalCode&amp;format=json').then(function(response) {
              $scope.zipCodes = response;
            });
  </code></pre>
  
  <p>Here is the HTML where I tried to display it:</p>
  
  <pre><code>&lt;pre&gt;zipCodes {{zipCodes | json}}&lt;/pre&gt;
  </code></pre>
  
  <p>But nothing displays, any idea what I'm doing wrong?</p>
  
  <p>I also tried this:</p>
  
  <pre><code>$http.jsonp('http://api.geosvc.com/rest/US/84606/nearby?apikey=4ff687893a7b468cb520b3c4e967c4da&amp;d=20&amp;pt=PostalCode&amp;format=json').then(function(response) {
                  $scope.zipCodes = response;
                });
  </code></pre>
  
  <p>I've also tried AngularJS resource but that is also returning undefined:</p>
  
  <pre><code>var zipCodes = $resource("http://api.geosvc.com/rest/US/84606/nearby?apikey=4ff687893a7b468cb520b3c4e967c4da&amp;d=20&amp;pt=PostalCode&amp;format=json",
              { callback: "JSON_CALLBACK" },
              { get: { method: "JSONP" }}
              );
          zipCodes.get({}, function(zipCode){
              console.debug(zipCode.PostalCode);
          });
          console.debug(zipCodes.get());
          $scope.zipCodes = zipCodes.get().results;
  </code></pre>