ng-repeat not iterating through list of images in JSON
<p>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.</p>

<p>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.</p>

<p>HTML:</p>

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

<p>JS:</p>

<pre><code>var app = angular.module('instagram', []);

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

  $http.get('https://codesmith-precourse.firebaseio.com/instagram/-JqL35o8u6t3dTQaFXSV.json')
    .then(function (data) {
      $scope.imageUrls = data;

      console.log($scope.imageUrls);
    });
}]);
</code></pre>

<p>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? </p>

<p>Checking the console: <a href="http://i.stack.imgur.com/Dot3I.png" rel="nofollow">console.log($scope.imageUrls)</a></p>

<p>I also tried using {{imageUrl.url}} as ng-src but that seemed to trigger errors as well. I set up a Plnkr:
<a href="http://plnkr.co/edit/yQpCIRp9FHdDHTMA1HCL?p=preview" rel="nofollow">http://plnkr.co/edit/yQpCIRp9FHdDHTMA1HCL?p=preview</a></p>

<p>This has been bugging me for awhile, so if you can help, thanks!</p>