angularjs + jsonp returns a fail - angularjs

Question

I am trying to build a sample app that will grab data using JSONP to populate. I have it put up at http://angular.onagrag.com/ and clicking on register.
The file I am trying to load is at http://api.onagrag.com/data.json
When I access http://angular.onagrag.com/register it fires the error method of the object (and it fires it twice)
here is the angular js file that I am using (it is also located at http://angular.onagrag.com/js/test.js
It runs fine if I use local data (e.g. use the $http.get method instead of the $http.jsonp method), but will not work with jsonp. Any help is appreciated!
var App = angular.module('popdust', ['ngResource']).config(['$locationProvider', function($location) {
$location.html5Mode(true).hashPrefix('!')
}]);
App.config(['$routeProvider', function($routes) {
$routes.when('/register',{
templateUrl : '/templates/register.html',
controller : RegisterCtrl
});
$routes.when('/',{
templateUrl : '/templates/home.html',
controller : HomeCtrl
});
}]);
var HomeCtrl = function($scope, $http, $location) {
$scope.title = 'We are home';
$scope.obj = ['one', 'two','three'];
};
var RegisterCtrl = function($scope, $http, $location) {
$scope.title = 'Register!';
$scope.handleData = function(data){
$scope.fields = data;
}
$scope.fetchjsonp = function(){
$http.jsonp('http://api.onagrag.com/data.json?callback=JSON_CALLBACK').success(function(data){
alert("success");
}).error(function(data, status, headers, config) {
alert("YOU FAIL");
});
}
$scope.fetch = function(){
$http.get('js/data.json').success($scope.handleData);
}
$scope.fetchjsonp();
};
HomeCtrl.$inject = ['$scope','$http','$location'];
RegisterCtrl.$inject = ['$scope','$http','$location'];

Answer 1

Looks to me like the problem is with your resource. When I check http://api.onagrag.com/data.json?callback=JSON_CALLBACK I get the following response:
[{
"id" : "first_name",
"title" : "First Name",
"description" : "The name your parents gave you"
},{
"id" : "last_name",
"title" : "Last Name",
"description" : "In Spanish, it's called your apellido (or something like that)"
}]
This is not a valid JSONP response. With the request parameter callback=nameOfCallbackFn the response should be a single function call to a function named nameOfCallbackFn (with the result as it's only parameter).
Update: The server that serves the JSONP must read the callback request parameter and respond with a file that does a method call to the request method name. When you use the angular $http.jsonp method, angular will change the callback request parameter to the correct angular jsonp callback method name (atm they seem to be named angular.callback._0, ..._1 etc). You can't serve a static file as this name might change from one request to the other. This was not clear in my original answer.
Something like this:
nameOfCallbackFn ( [{
"id" : "first_name",
"title" : "First Name",
"description" : "The name your parents gave you"
},{
"id" : "last_name",
"title" : "Last Name",
"description" : "In Spanish, it's called your apellido (or something like that)"
}] );
Where nameOfCallbackFn is specified by angular.
JSONP has some potential security vulnerabilities - you can read more about them and how to prevent them in your angular app here.