binhxn89 binhxn89 -5 years ago 133
AngularJS Question

ng-repeat not iterating through list of images in JSON

I'm quite new to Angular and am having trouble using the $http service to make a GET request for images in JSON (just a plain array of images). For every image, I want to repeat that and add them into my ng-src. I'm trying to achieve a layout similar to Instagram.

So I think the $http.get part is correct where I store it into $scope.imageUrls, and from there I iterate through it using ng-repeat. Then from there, for each iteration, I plug that into ng-src in my img tag and I just don't know how to debug from there.


<div class="posts" ng-controller="PostController">
<div class="post" ng-repeat="imageUrl in imageUrls">
<img class="photo" ng-src="{{imageUrl}}" />
<div class="post-box">
<div><span class="likes"> # </span> Likes</div>


var app = angular.module('instagram', []);

app.controller('PostController', ['$scope', '$http', function($scope, $http) {

.then(function (data) {
$scope.imageUrls = data;


I tried used console.log to check for errors, but the data seems to be there. Is it just returning the block of data rather than each element/image in the JSON?

Checking the console: console.log($scope.imageUrls)

I also tried using {{imageUrl.url}} as ng-src but that seemed to trigger errors as well. I set up a Plnkr:

This has been bugging me for awhile, so if you can help, thanks!

Answer Source

I update your plunker

In $http you get a responsa that contains more informations that only data. To get data you must do it :

    .then(function (response) {
      $scope.imageUrls =;


And in ng-repeat you must add track by argument because image can be duplicate

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download