title: ng-repeat showing blank values
body: <p><strong>Question updated and solution provided.</strong>
  I'm getting a json feed from <a href="https://filters.rocks/embed/466.json" rel="nofollow noreferrer">https://filters.rocks/embed/466.json</a>.</p>
  
  <p>The json is coming through in my scope but and I can view it in my pre tags but for whatever reason it's just not populating my ng-repeat.</p>
  
  <pre><code>app.controller('InstagramCtrl', ['$scope', '$http',
  function($scope, $http) {
      $scope.items = [];
      $http.get('https://filters.rocks/embed/466.json').then(function(response) {
              $scope.items = response;
              instagramSuccess($scope, $scope.items);
  
      });
  
      var instagramSuccess = function(scope, response) {
          if (response.data.length &lt;= 0) {
              $scope.error = response.meta.error_type + ' | ' + response.meta.error_message;
              return;
          }
          if (response.data.length &gt; 0) {
              $scope.items = response.data;
  
          } else {
              $scope.error = "This hashtag has returned no results";
          }
      };
  
  }
  ]);
  </code></pre>
  
  <p>HTML </p>
  
  <pre><code>    &lt;div class="container" ng-controller="InstagramCtrl"&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;
              &lt;div class="panel panel-default"&gt;
                  &lt;div class="panel-heading"&gt;
  
                  &lt;/div&gt;
                  &lt;div class="panel-body"&gt;
                      &lt;ul class="instagram-list" ng-repeat="item in items"&gt;    
                          &lt;li&gt;
                              &lt;small&gt;{{item.data.feed.id}}&lt;/small&gt;
                              &lt;img ng-src="{{item.data.feed.approved_images.medium}}" width="250"&gt;
                          &lt;/li&gt;
  
                      &lt;/ul&gt;                       
                  &lt;/div&gt;
                  &lt;pre&gt; filter.rocks {{ items | json }} &lt;/pre&gt;
              &lt;/div&gt;
          &lt;/div&gt;           
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>Update</strong>
  I took bits and pieces from everyone and ended up with this ;
  Controller</p>
  
  <pre><code>$scope.items = [];
  
        $http.get('https://filters.rocks/embed/466.json').then(function(response) {
  
              instagramSuccess(response);
  
      });
  
      var instagramSuccess = function(response) {
          if (!response.data) {
              $scope.error = response.meta.error_type + ' | ' + response.meta.error_message;
              return;
          }
          // check if data is defined if so, check objects are defined, then if array is defined. 
          if (response.data &amp;&amp; response.data.feed &amp;&amp; response.data.feed.approved_images &amp;&amp; response.data.feed.approved_images.length ) {
              //if all good $scope.items becomes array
              $scope.items = response.data.feed.approved_images;
  
          } else {
              $scope.error = "This hashtag has returned no results";
          }
      };
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>                 &lt;ul class="instagram-list" ng-repeat="item in items"&gt;    
                          &lt;li class="instagram-item"&gt;
                              &lt;small style="color:blue;"&gt;{{item.id}}&lt;/small&gt;
                              &lt;div bg-img="{{item.medium}}" width="250"&gt;&lt;/div&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
  </code></pre>