title: Adding Span icons/glyphicon/graph in td based on condition/number using AngularJs
body: <p>I am trying to add span icons/glyph-icon using angular in td before country, i have used the following code to do so but i need to do more nicer way dynamically.
  need your help. </p>
  
  <p><a href="https://i.stack.imgur.com/R7l2D.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R7l2D.png" alt="enter image description here"></a></p>
  
  <pre><code>    $scope.countries = [
          {name: 'Australia', rating: 0, other: "lorem ipsum"},
          {name: 'India', rating: 1, other: "lorem ipsum"},
          {name: 'Canada', rating: 3, other: "lorem ipsum"},
          {name: 'Mexico', rating: 2, other: "lorem ipsum"},
          {name: 'UK', rating: 4, other: "lorem ipsum"},
          {name: 'Germany',rating: 2, other: "lorem ipsum"},
          {name: 'USA',rating: 1, other: "lorem ipsum"}
      ];
  
  &lt;tr ng-repeat="country in countries"&gt;
      &lt;td&gt;
          &lt;span ng-if="country.rating == 1"&gt;
                  &lt;span class="glyphicon glyphicon-star"&gt;&lt;/span&gt;
           &lt;/span&gt;
          &lt;span ng-if="country.rating == 2"&gt;
                  &lt;span class="glyphicon glyphicon-star"&gt;&lt;/span&gt;
                  &lt;span class="glyphicon glyphicon-star"&gt;&lt;/span&gt;
           &lt;/span&gt;
          &lt;span ng-if="country.rating == 3"&gt;
              &lt;span class="glyphicon glyphicon-star"&gt;&lt;/span&gt;
              &lt;span class="glyphicon glyphicon-star"&gt;&lt;/span&gt;
              &lt;span class="glyphicon glyphicon-star"&gt;&lt;/span&gt;
        &lt;/span&gt;
          &lt;span ng-if="country.rating == 4"&gt;
          &lt;span class="glyphicon glyphicon-star"&gt;&lt;/span&gt;
              &lt;span class="glyphicon glyphicon-star"&gt;&lt;/span&gt;
              &lt;span class="glyphicon glyphicon-star"&gt;&lt;/span&gt;
              &lt;span class="glyphicon glyphicon-star"&gt;&lt;/span&gt;
              &lt;span class="glyphicon glyphicon-star"&gt;&lt;/span&gt;
        &lt;/span&gt;
          &lt;span&gt;
              {{ country.name}}
          &lt;/span&gt;
      &lt;/td&gt;
      &lt;td&gt;{{country.other}}&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>