AngularJS consuming REST Service


I need to code an AngularJS page which displays some JSON data coming from a REST Service. The REST service when invoked displays this JSON example data:

[{"key":"ABX1234","value":"Network Hub"}]

Here is the HTML page that I'm using to retrieve the data:

<html ng-app>
    <script src=""></script>
        function Hello($scope, $http) {
                success(function(data) {
                    $scope.json = data;
        <div ng-controller="Hello">
            <p>The ID is {{json.key}}</p>
            <p>The content is {{json.value}}</p>

Unfortunately nothing is displayed as json.key or json.value. Can you help me to find out what is the issue ?

Problem courtesy of: user2824073


It should be like this:

 <div ng-controller="Hello">   
    <div ng-repeat="json in json">
                <p>The ID is {{json.key}}</p>
                <p>The content is {{json.value}}</p>

You are getting array of objects. It needs to be iterated.

Solution courtesy of: Dr Casper Black


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.