title: $http response is undefined in angularJS
body: <p>I am having some problems, I appear to be getting the data in the callback but can't seem to get to it, to be honest I'm not entirely sure what is going on.</p>
  
  <p>When I click the "Get Movie" button,  I get the following in the console:</p>
  
  <pre class="lang-none prettyprint-override"><code>Error: response is undefined
  app&lt;/$scope.addBook@http://onaclovtech.com/apps/movies/:42:1
  Wa.prototype.functionCall/&lt;@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.6/angular.min.js:162:14
  Mc[c]&lt;/&lt;.compile/&lt;/&lt;/&lt;@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.6/angular.min.js:178:390
  zd/this.$get&lt;/h.prototype.$eval@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.6/angular.min.js:101:134
  zd/this.$get&lt;/h.prototype.$apply@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.6/angular.min.js:101:399
  Mc[c]&lt;/&lt;.compile/&lt;/&lt;@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.6/angular.min.js:178:370
  Xc/c/&lt;@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.6/angular.min.js:27:145
  q@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.6/angular.min.js:7:357
  Xc/c@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.6/angular.min.js:27:129
  </code></pre>
  
  <p>When I look at the network tab after the button press I get the following:</p>
  
  <blockquote>
    <p><a href="http://api.rottentomatoes.com/api/public/v1.0/movies.json?apikey=[api-key]&amp;q=The%20Way%20Of%20The%20Gun&amp;page_limit=1&amp;callback=angular.callbacks._0" rel="nofollow">http://api.rottentomatoes.com/api/public/v1.0/movies.json?apikey=[api-key]&amp;q=The%20Way%20Of%20The%20Gun&amp;page_limit=1&amp;callback=angular.callbacks._0</a></p>
  </blockquote>
  
  <p>When I look at the debugger I get a movies.json response object that looks like this:</p>
  
  <pre><code>angular.callbacks._0(
    {"total":1,"movies":[{"id":"15775","title":"The Way of the Gun","year":2000,"mpaa_rating":"R","runtime":119,"critics_consensus":"","release_dates":{"theater":"2000-09-08","dvd":"2001-06-19"},"ratings":{"critics_rating":"Rotten","critics_score":48,"audience_rating":"Upright","audience_score":71},"synopsis":"","posters":{"thumbnail":"http://content7.flixster.com/movie/11/17/79/11177993_tmb.jpg","profile":"http://content7.flixster.com/movie/11/17/79/11177993_tmb.jpg","detailed":"http://content7.flixster.com/movie/11/17/79/11177993_tmb.jpg","original":"http://content7.flixster.com/movie/11/17/79/11177993_tmb.jpg"},"abridged_cast":[{"name":"Ryan Phillippe","id":"162676004","characters":["Parker"]},{"name":"Benicio Del Toro","id":"162652510","characters":["Longbaugh"]},{"name":"James Caan","id":"162656402","characters":["Joe Sarno"]},{"name":"Juliette Lewis","id":"162654115","characters":["Robin"]},{"name":"Taye Diggs","id":"162655514","characters":["Jeffers"]}],"alternate_ids":{"imdb":"0202677"},"links":{"self":"http://api.rottentomatoes.com/api/public/v1.0/movies/15775.json","alternate":"http://www.rottentomatoes.com/m/way_of_the_gun/","cast":"http://api.rottentomatoes.com/api/public/v1.0/movies/15775/cast.json","reviews":"http://api.rottentomatoes.com/api/public/v1.0/movies/15775/reviews.json","similar":"http://api.rottentomatoes.com/api/public/v1.0/movies/15775/similar.json"}}],"links":{"self":"http://api.rottentomatoes.com/api/public/v1.0/movies.json?q=The+Way+Of+The+Gun&amp;page_limit=1&amp;page=1"},"link_template":"http://api.rottentomatoes.com/api/public/v1.0/movies.json?q={search-term}&amp;page_limit={results-per-page}&amp;page={page-number}"}
  )
  </code></pre>
  
  <p>So the data all appears to be there, I am just having a hard time figuring out how to get it.</p>
  
  <p>Could someone help point me in the direction of getting the data correctly?</p>
  
  <p>(I do plan to move the angularjs controller to a .js file eventually, but for now it's in the .html file, sorry)</p>
  
  <p>This is my original code:</p>
  
  <p>Index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="myapp" manifest="covers.appcache"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content=""&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.6/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.firebase.com/js/client/1.0.11/firebase.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.firebase.com/libs/angularfire/0.7.1/angularfire.min.js"&gt;&lt;/script&gt;
      &lt;script src="rottentomatoes.js"&gt;&lt;/script&gt;
      &lt;!-- Latest compiled and minified CSS --&gt;
      &lt;link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"&gt;
      &lt;style type="text/css"&gt;
      &lt;!--
        /* Move down content because we have a fixed navbar that is 50px tall */
        body {
          padding-top: 50px;
          padding-bottom: 20px;
        }
      --&gt;
      &lt;/style&gt;
      &lt;!-- Optional theme --&gt;
      &lt;link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"&gt;
    &lt;/head&gt;
    &lt;body ng-controller="MyController"&gt;
  
      &lt;div align="left"&gt;
         &lt;button type="button" class="btn btn-primary btn-lg active" ng-click="addBook()"&gt;Get Movie&lt;/button&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;div&gt;
        {{data}}
        {{success}}
  
      &lt;script&gt;
        var app = angular.module("myapp", ["video"])
        .controller('MyController', ['$scope', '$video', function($scope, $video) {        
          $scope.addBook = function(e) {
            var response = $video.search('[api-key]', 'The Way Of The Gun', '1');
  
            response
              .success(function(data, status) {console.log('SUCCESS' + data); $scope.data = data;  $scope.status = status;})
              .error(function(data, status) {console.log('ERROR' + status); $scope.data = data; $scope.status = status;});
  
            // Found somewhere that said I needed a jsonp_callback function, I just tried it to see if it did anything, doesn't appear to
            function jsonp_callback(data) {console.log('JSONP' + data);  $scope.data = data; };
          }    
        }]);
  
        app.config(function($httpProvider) {
          //Enable cross domain calls
          $httpProvider.defaults.useXDomain = true;
          delete $httpProvider.defaults.headers.common['X-Requested-With'];
          $httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
        });
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>rottentomatoes.js</p>
  
  <pre><code>angular.module('video', []).factory('$video', ['$http', function($http) {
    return {
      search: function(api_key, query, page_limit) {
        var method = 'JSONP';
        var url = "http://api.rottentomatoes.com/api/public/v1.0/movies.json?";
        $http({
          method: method,
          url: url + "apikey=" + api_key +
              "&amp;q=" + query +
              "&amp;page_limit=" + page_limit + '&amp;callback=JSON_CALLBACK'
        });
      }
    };
  }]);
  </code></pre>