angular-ui/bootstrap ratting issue on collection-repeat ionic

Question

I am using angular-ui/bootstrap the component Rating (ui.bootstrap.rating).

My issue that max property isn't working correctly when I am using collection-repeat .

Its shows me always only one icon max, Also when I trying to play with pro of collection-repeat then search some time showing less icons, but If I an using ng-repat all works great. this my code:

<li class="item"  collection-repeat=" contact in contacts |filter: data.searchText">
      <!--<li class="item" ng-repeat=" contact in contacts |filter: data.searchText">-->
  <div class="row  larger font">

  <div  class ="col" ng-init="contact.active">
        <uib-rating ng-model="contact.active" max={{contact.total}} 
         state-on="'ion-person-stalker positive '" state-off="'ion-person-stalker'" 
         ng-click="changeActive(contact);data.searchText =''"></uib-rating> </div>

the basic link for code of it plnkr this is without collection repeat

UPDATE: link with example updated.

Answer 1

This is because collection-repeater renders into the DOM only as many items as are currently visible. So it does not render immediately. That's why you don't have access to the contact variable in uib-rating when it started rendering. If your contacts list isn't very big than you can use ng-repeat without any problems and losing performance.