title: Calculating a Star Rating - Alternative to ng-repeat
body: <p>I have an array of objects that all contain a <code>star_rating</code> property</p>
  
  <pre><code>[{ name: 'Chemistry', star_rating: 3 },
   { name: 'Physics', star_rating: 5 }]
  </code></pre>
  
  <p>I am displaying these objects in a list via <code>ng-repeat</code>. What I want to do is display an object's # of stars alongside the maximum # of stars <code>(5)</code>, so the list will look something like this</p>
  
  <pre><code>Chemistry [*][*][*][ ][ ]
  Physics   [*][*][*][*][*]
  </code></pre>
  
  <p>I have an existing solution that calculates and displays this</p>
  
  <pre><code>&lt;i ng-repeat="i in [].constructor(topic.star_rating) track by $index" class="yellow"&gt;&lt;/i&gt;
  &lt;i ng-repeat="i in [].constructor(5 - topic.star_rating) track by $index" class="grey"&gt;&lt;/i&gt;
  </code></pre>
  
  <p>This works fine for small arrays, but there is a performance hit when the list grows (UI lags &amp; becomes jittery) as these repeats are multiplied by the # of objects</p>
  
  <p>Is there a more performant solution to my current method? </p>
  
  <p>Thanks for any input!</p>