title: HTTP JSONP request issue with $http in AngularJS
body: <p>I get the bellow error when I try to use the <code>JSONP</code> method in angularJS.</p>
  
  <blockquote>
    <p>Uncaught SyntaxError: Unexpected token :    <a href="http://example.com/getSomeJson?format=jsonp&amp;json_callback=angular.callbacks._0" rel="nofollow noreferrer">http://example.com/getSomeJson?format=jsonp&amp;json_callback=angular.callbacks._0</a></p>
  </blockquote>
  
  <p>What am I doing wrong here, this is my AngularJs controller with the http request:</p>
  
  <h2>UPDATED QUESTION DETAILS</h2>
  
  <p>See below with code snipit which reproduces my problem, I've commented some of the <code>.js</code> to illustrate what I've tried so far.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('app', []); 
  
  app.controller('mainController', ['$http', 'mainService', function($http, mainService){
  
   mainCtrl = this;
  
   mainCtrl.test = "If you can see this the mainController works"
  
   var promise = mainService.getJson();
   promise.then(function (data)
   {
    mainCtrl.json = data;
   });
  }]);
  
  app.service("mainService", function ($http, $q)
  {
    var deferred = $q.defer();
   
      /*  
      // Method to Grab JSON that has CORs enabled:
      // JSON resource with CORs enabled
   var url = 'https://jsonplaceholder.typicode.com/posts/1';
   $http({
       method: 'GET',
       cache: true,
       url: url,
             headers: {  
             'Content-Type': 'application/json;charset=UTF-8'  
         }
   }).
   success(function(response) {
       //your code when success
       deferred.resolve(response);
       console.log('HTTP CORS SUCCESS!');
   }).
   error(function(response) {
       //your code when fails
       console.log('HTTP CORS ERROR!');
   });
  */ 
  
  
   /* */
      // Method to Grab JSON that has CORs enabled:
   // JSON resources without CORs enabled
   var url = 'http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-1.json' // does not work?
      // var url = 'http://samcroft.co.uk/json-data/sample'  // this one works
  
   $http({
          method: 'jsonp',
          url: url + '?callback=JSON_CALLBACK',
      }).
   success(function(response) {
       //your code when success
       deferred.resolve(response);
       console.log('JSONP SUCCESS!');
   }).
   error(function(response) {
       //your code when fails
       console.log('JSONP ERROR!');
   });
  
  
   
   this.getJson = function ()
   {
    return deferred.promise;
   };
  
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" ng-app="app"&gt;
  &lt;head&gt;
   &lt;meta charset="UTF-8"&gt;
   &lt;title&gt;Document&lt;/title&gt;
   &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"&gt;&lt;/script&gt;
   &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular-route.js"&gt;&lt;/script&gt;
   &lt;script src="app.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-controller="mainController as mainCtrl"&gt;
   &lt;p&gt;{{mainCtrl.test}}&lt;/p&gt;
   &lt;hr /&gt;
   &lt;p&gt;You should also see the JSON obeject below:&lt;/p&gt;
   {{mainCtrl.json}}
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h2>ORIGIONAL QUESTION DETAILS</h2>
  
  <pre><code>app.controller('testController', ['$scope', '$http', function($scope, $http){
  
      var url = 'http://example.com/getSomeJson';
  
      $http({
          method: 'JSONP',
          url: url,
          params: {
              format: 'jsonp',
              json_callback: 'JSON_CALLBACK'
          }
      }).
      success(function(data) {
          //your code when success
          $scope.data = data;
          console.log('SUCCESS!');
      }).
      error(function(status) {
          //your code when fails
          console.log('ERROR!');
      });
  }]);
  </code></pre>
  
  <p>When I look at the json in the chromes sources panel I see where the error is highlighted.
  <a href="https://i.stack.imgur.com/gHWOQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gHWOQ.png" alt="enter image description here"></a></p>
  
  <p>Any idea what I'm doing wrong?  Or could it be an issue with how the API service is configured?</p>