title: TypeError: Cannot read property 'jsonp' of undefined
body: <p>I created a function that saves data in my database.</p>
  
  <pre><code>  $scope.addMovie = function() {
  
      'http://api.themoviedb.org/3/movie/206647?api_key=a8f7039633f2065942cd8a28d7cadad4&amp;append_to_response=releases'
      // Search for release dates using the ID.
      var base = 'http://api.themoviedb.org/3/movie/';
      var movieID = $(event.currentTarget).parent().find('.movieID').text()
      var apiKey = 'a8f7039633f2065942cd8a28d7cadad4&amp;query='
      var append_to_response = '&amp;append_to_response=releases'
      var callback = 'JSON_CALLBACK'; // provided by angular.js
      var url = base + movieID + '?api_key=' + apiKey + append_to_response + '&amp;callback=' + callback;
  
      $http.jsonp(url,{ cache: true}).
        success(function(data, status, headers, config) {
  
          if (status == 200) {
  
            $scope.movieListID = data;
            console.log($scope.movieListID);
  
            var releaseNL;
  
            for (var i = 0; i &lt; $scope.movieListID.releases.countries.length; i++) {
              var release = $scope.movieListID.releases.countries[i];
              if (release['iso_3166_1'] == 'NL') {
                  releaseNL = release;
              }
            }
  
            if(typeof releaseNL === 'undefined'){
              // With release date
  
              Notification($scope.movieListID.original_title + ' is toegevoegd, maar heeft nog geen Nederlandse premiere datum.');
  
              createMovie.create({
                title:          $scope.movieListID.original_title,
                release_date:   $scope.movieListID.release_date,
                image:          $scope.movieListID.poster_path,
                movie_id:       $scope.movieListID.id
              }).then(init);
  
            } else {
              Notification.success($scope.movieListID.original_title + ' is toegevoegd.');
  
              createMovie.create({
                title:          $scope.movieListID.original_title,
                release_date:   releaseNL.release_date,
                image:          $scope.movieListID.poster_path,
                movie_id:       $scope.movieListID.id
              }).then(init);
            };
  
          } else {
              console.error('Error happened while getting the movie list.')
          }
        })
  
        $(".search_results").fadeOut(250);
  
        $scope.searchquery = null
    };
  </code></pre>
  
  <p>I want to remove this code from my controller to service. So I created a "addMovieService.js"</p>
  
  <pre><code>(function(){
    "use strict";
  
    angular.module('addMovieseat')
  
    .factory('addMovie', [
  
      function($http, $q, $scope){
        return{
          add: function(){
  
            'http://api.themoviedb.org/3/movie/206647?api_key=a8f7039633f2065942cd8a28d7cadad4&amp;append_to_response=releases'
            // Search for release dates using the ID.
            var base = 'http://api.themoviedb.org/3/movie/';
            var movieID = $(event.currentTarget).parent().find('.movieID').text()
            var apiKey = 'a8f7039633f2065942cd8a28d7cadad4&amp;query='
            var append_to_response = '&amp;append_to_response=releases'
            var callback = 'JSON_CALLBACK'; // provided by angular.js
            var url = base + movieID + '?api_key=' + apiKey + append_to_response + '&amp;callback=' + callback;
  
            $http.jsonp(url,{ cache: true}).
              success(function(data, status, headers, config) {
  
                if (status == 200) {
  
                  $scope.movieListID = data;
                  console.log($scope.movieListID);
  
                  var releaseNL;
  
                  for (var i = 0; i &lt; $scope.movieListID.releases.countries.length; i++) {
                    var release = $scope.movieListID.releases.countries[i];
                    if (release['iso_3166_1'] == 'NL') {
                        releaseNL = release;
                    }
                  }
  
                  if(typeof releaseNL === 'undefined'){
                    // With release date
  
                    Notification($scope.movieListID.original_title + ' is toegevoegd, maar heeft nog geen Nederlandse premiere datum.');
  
                    createMovie.create({
                      title:          $scope.movieListID.original_title,
                      release_date:   $scope.movieListID.release_date,
                      image:          $scope.movieListID.poster_path,
                      movie_id:       $scope.movieListID.id
                    }).then(init);
  
                  } else {
                    Notification.success($scope.movieListID.original_title + ' is toegevoegd.');
  
                    createMovie.create({
                      title:          $scope.movieListID.original_title,
                      release_date:   releaseNL.release_date,
                      image:          $scope.movieListID.poster_path,
                      movie_id:       $scope.movieListID.id
                    }).then(init);
                  };
  
                } else {
                    console.error('Error happened while getting the movie list.')
                }
              })
  
              $(".search_results").fadeOut(250);
  
              $scope.searchquery = null
          }
        }
    }])
  
  })();
  </code></pre>
  
  <p>And in my controller I now have,</p>
  
  <pre><code>$scope.addMovie = function() {
  
    addMovie.add();
  
  };
  </code></pre>
  
  <p>Now when I fire the addMovie function I get an error <code>TypeError: Cannot read property 'jsonp' of undefined</code>. Can someone explain what´s going wrong?</p>