How Do I Organize External JSON Data in Angular.js?

Question

Okay, so I am trying to organize data I am retrieveing from an external API, and I am not sure how to go about it. I am able to get the entire JSON data to show via {{data}}, but how would I go about getting just a property within the data? What I have so far is:

var tanApp = angular.module('tanApp')
.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.awesomeThings = [
  'HTML5 Boilerplate',
  'AngularJS',
  'Karma'
];
$scope.data = 'unknown';
    $http.get('http://iaspub.epa.gov/enviro/efservice/getEnvirofactsUVHOURLY/ZIP/33126/JSON%27?callback=callBackFn').success(function(data){
        $scope.data = data;
});
    tanApp.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
    }]);

and in my HTML:

{{data}}

Answer 1

To display a properties of your data in your HTML page all you have to do is

{{data.yourPropertyName}}

Making use of two way binding and ngRepeat might also come in handy displaying your data.

Answer 2

You have an extra character after the JSON and before the ? in your URL. Get rid of it and it will give you proper json instead of (the default?) XML.