Not retrieve image from JSON in Mobile Angular Ui.(Angular Js)

Question

I want to retrieve image from JSON. Right now i am retrieving all these things from JSON Like Price, Display order But Image can't be retrieve.

HTML:

<div ng-controller="chooseProductDescription">
                <div ng-repeat="cat in productDescription">
                        <img src="{{cat.product.productPictures[0].pictureUrl}}">
                        <span>Price</span>{{cat.product.price}}
                        <span>Display Order</span>{{cat.product.productPictures[0].displayOrder}}
                </div>
            </div>

CONTROLLER:

.controller('chooseProductDescription', function($scope, $http){
    $http({
        method:'get',
        url:'http://www.json-generator.com/api/json/get/cgrvadFrGW?indent=2',
        header:{'Content-Type':'application/json'},
    }).success(function(data,status,headers, config){   
        $scope.productDescription = data;
        alert("shjkshjksadhkjas");
    }).error(function(data, status,headers, config){

    })
})

Right now i am retrieving data from this URL:

http://www.json-generator.com/api/json/get/cgrvadFrGW?indent=2

i want to retrieve image from json. Please share your ideas.

Answer 1

You are not using the correct format in the reponse of the $http promise. The code should be :

$http({
    method:'get',
    url:'http://www.json-generator.com/api/json/get/cgrvadFrGW?indent=2',
    header:{'Content-Type':'application/json'},
}).success(function(response){   
    $scope.productDescription = response.data;
    alert("shjkshjksadhkjas");
}).error(function(response){

})