title: Ng-repeat on integer value
body: <p>I'm trying to use <code>ng-repeat</code> on a <code>div</code> which should contain a star image, each pie in the JSON has a <code>rating</code> property from 1-5, and I want to use this value to loop out x number of stars. I've got this working somewhat but it's flawed in the way that I can't re-sort the array and make the stars follow the correct item in the list since I'm using <code>[$index]</code> to track the iteration. </p>
  
  <p>My solution is rather ugly as well since I'm creating arrays with as many index placeholders as the value of the <code>rating</code> property, and then pushing this into an array to loop out the appropriate number of images. I would like to have a more elegant solution. </p>
  
  <p>How should I go about this problem without using <code>[$index]</code>?</p>
  
  <p>Snippet of the JSON:</p>
  
  <pre><code>{"pies": [
      ...
  
      {
          "name": "Blueberry pie", 
          "imageUrl": "img/blueberrypie.png", 
          "id": "1",
          "rating": "5", //Ng-repeat depending on this value
          "description": "Blueberry pie is amazing."
      },
  
      ...
  ]}
  </code></pre>
  
  <p>My controller:</p>
  
  <pre><code>pieShopApp.controller('shopCtrl', ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) {
      $scope.pieId = $routeParams.pieId,
      $scope.sortingOptions = ['A-Z', 'Rating'],
      $scope.sortingValues = ['name', 'rating'],
      $scope.ratings = [],
      $http.get('jsons/pies.json')
           .success(function(data, status) {
              $scope.pies = data;
  
              for (i = 0; i &lt; $scope.pies.pies.length; i++) {
  
                  switch ($scope.pies.pies[i].rating) {
  
                      case "1": $scope.ratings.push(["1"]); break;
  
                      case "2": $scope.ratings.push(["1", "2"]); break;
  
                      case "3": $scope.ratings.push(["1", "2", "3"]); break;
  
                      case "4": $scope.ratings.push(["1", "2", "3", "4"]); break;
  
                      case "5": $scope.ratings.push(["1", "2", "3", "4", "5"]); break;
                  }
              }
              console.log($scope.ratings);
           })
           .error(function(status) {
              console.log(status);
           })
  }]);
  </code></pre>
  
  <p>The list which contains the pie items:</p>
  
  <pre><code>&lt;div id="pie-list-wrapper"&gt;
      &lt;ul class="nav"&gt;
          &lt;a href="#/pies/pieid" ng-repeat="pie in pies.pies | filter:query | orderBy:orderProp"&gt;
              &lt;li class="list-item rounded-corners box-shadow"&gt;
                  &lt;aside&gt;
                      &lt;img src="{{pie.imageUrl}}" no-repeat alt="Image of the pie"&gt;
                  &lt;/aside&gt;
                  &lt;header&gt;
                      &lt;h1 ng-bind="pie.name" id="item-name" class="bold-text"&gt;&lt;/h1&gt;
                  &lt;/header&gt;
                  &lt;article&gt;
                      &lt;span ng-bind="pie.description" id="item-desc"&gt;&lt;/span&gt;
                  &lt;/article&gt;
                  &lt;footer id="item-rating"&gt;
                      &lt;div ng-repeat="rating in ratings[$index]" class="rating-box"&gt;&lt;/div&gt; //Contains the stars
                  &lt;/footer&gt;
              &lt;/li&gt;
          &lt;/a&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Outcome: </p>
  
  <p><img src="https://i.stack.imgur.com/qQobX.png" alt="pies list"></p>