<span name="hover-star" data-toggle="tooltip" data-placement="bottom" class="red-tooltip" data-html="true" title="<div class='row' style='font-size:10px; color:blue; '><span class='glyphicon glyphicon-star col-sm-1' style='width:3%'></span>
<span class='glyphicon glyphicon-star col-sm-1' style='width:3%'></span>
<span class='glyphicon glyphicon-star col-sm-1' style='width:3%'></span>
<span class='glyphicon glyphicon-star col-sm-1' style='width:3%'></span>
<span class='glyphicon glyphicon-star col-sm-1' style='width:3%'></span>
Try out the following by using nested ng-repeat
<div ng-repeat="i in getNumberPattern(numberPattern) track by $index" style="display:inline;">
<span ng-repeat="i in getNumberPattern($index) track by $index">*</span>
</div>
Check out the Plunker link
In the answer I have simply displayed character *
, add your own styling to display the icons.