title: Can't loop over array in AngularJS template
body: <p>Running in to a frustrating issue with AngularJS. All I'm trying to do is load a json file and display it in the template using ng:repeat. I've not had any issue with this in the past but for some reason, the code below doesn't work. Can someone take a look and tell me what I'm missing?</p>
  
  <p>If you look at the template:</p>
  
  <p><strong>palette.html</strong></p>
  
  <pre><code>{{palette}}
  
  &lt;div ng-repeat="for color in palette"&gt;{{color}}&lt;/div&gt;
  </code></pre>
  
  <p><code>{{palette}}</code> outputs <code>[{"hex":"#6e4516"},{"hex":"#DDDABE"},{"hex":"#ECEAD9"},{"hex":"#98A349"},{"hex":"#798616"}]</code> however the ng:repeat displays nothing. So the json is being loaded in to the scope but for some reason I can't loop over it.</p>
  
  <p>Here is my main js file:</p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>var App = angular.module('App', []).
      config(function($routeProvider)
      {
          $routeProvider.
              when('/palette', {templateUrl:'templates/palette.html', controller:PaletteController}).
              otherwise({redirectTo:'/home'})
      });
  
  function PaletteController($scope, $http){
      $http.get('palette.json').success(function(palette){
          $scope.palette = palette;
      });
  }
  </code></pre>
  
  <p>and the data being loaded from the json file:</p>
  
  <p><strong>palette.json</strong></p>
  
  <pre><code>[
      {"hex": "#6e4516"},
      {"hex": "#DDDABE"},
      {"hex": "#ECEAD9"},
      {"hex": "#98A349"},
      {"hex": "#798616"}
  ]
  </code></pre>