Angular $http jsonp: how to parse through data - ajax

Question

I'm starting to learn Angular and I want to play around with the $http call function.
I basically want to make a get request to an external API:
angular.module('pokedexApp')
.controller('MainCtrl', function ($scope, $http) {
var response;
$http.jsonp("http://pokeapi.co/api/v1/pokemon/1/").success(function(response) {
response = response;
})
$scope.pokemon = response;
});
I'm probably completely wrong as to how this works. I basically want to {{ pokemon }} out a response to test it.
I'm getting a Uncaught SyntaxError: Unexpected token : error and I can't tell if it's because the return data isn't properly formatted or what.

Answer 1

The error is because in angular it will try to parse this response in json type. And it failed to parse, so it throw an error:
Uncaught SyntaxError: Unexpected token :
Seems in angularjs you'd better to handler jsonp response by your self.
$scope.triggerJsonp = function(){
$http.jsonp("http://pokeapi.co/api/v1/pokemon/1/", {params: {'callback':'eqfeed_callback'}});
};
window.eqfeed_callback = function(data){
$scope.response = data;
}
Here is jsfiddle.
Relative issue in jquery.ajax JSONP call showing "Uncaught SyntaxError: Unexpected token : " And answer use own callback to handle this.

Answer 2

It doesn't look like the website provides JSONP support - https://github.com/phalt/pokeapi_issues/issues/30
Your $http request is fine but you currently have a scoping issue with respect to 'response'. This is how your code should be written in order for your scope variable to be defined correctly:
angular.module('pokedexApp')
.controller('MainCtrl', function ($scope, $http) {
$http.jsonp("http://pokeapi.co/api/v1/pokemon/1/").success(function(response) {
$scope.pokemon = response;
})
});