I've been trying to get this to work, conceptually its simple click the tag and it calls a REST service that returns a JSON result, where i grab the country name and show it just as a test. I'm using angular.
Every time I click it returns with a Status of 0. believe this is the plnker http://plnkr.co/edit/k3Z6Ufi734oYE4ciVJs8
This is the HTML not much to it just call the GetInfo function via ng-click
<!DOCTYPE html>
<html ng-app="mainModule">
<!--http://plnkr.co/edit/k3Z6Ufi734oYE4ciVJs8-->
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link href="style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<div><b ng-click="GetInfo()">Click Me</b></div>
<b>{{AdditionalInfo.geobytescountry}}</b>
</body>
</html>
This is the Angular Back end.
var app = angular.module('mainModule', []);
app.controller('MainCtrl', function($scope, $http) {
$scope.name = 'World';
var cityDetailsUrl = "http://gd.geobytes.com/GetCityDetails?callback=?&fqcn=new%20york,%20NY,%20United%20States";
$scope.AdditionalInfo = {};
$scope.GetInfo = function ()
{
$http.get(cityDetailsUrl)
.success(function(data, status, header, config){
console.log('ok');
$scope.AdditionalInfo = data;
console.log(data);})
.error(function(data, status, header, config){
console.log('error');
$scope.AdditionalInfo = data;
console.log(status);});
}
});
the link provided should result in a JSON response as I tried id in the web browser. similar to this "geobytesinternet":"US","geobytescountry":"United States"
In your Plunker example this seems to be two problems.
First of all it seems like you want to use JSONP, so you should use $http.jsonp instead of $http.get, simple $http.get will fail because of same origin policy violation.
Another problem is that your URL should have the attribute callback=JSON_CALLBACK instead of callback=? for JSONP to work. After fixing these two issues the code seems to work properly.
See an edited version of the Plunker: http://plnkr.co/edit/SYB9TI29MOHfNPw1jjQT
Found it. Since the server is returning jsonp, not json, modify your url to contain JSON_CALLBACK to be:
http://gd.geobytes.com/GetCityDetails?callback=JSON_CALLBACK&fqcn=new%20york,%20NY,%20United%20States
And use $http.jsonp instead of $http.get. Here's the modified Plunker.