Collection Repeat Bug with Radio Buttons and ng-model

I have discovered a small bug when using collection-repeat with ion-radio elements.

On page load, if the selected-model refers to the first item in the list the checkbox does not appear next to the item. If the model refers to any other item the checkbox appears as expected. Clicking on the first item displays normal behavior. If you are using ion-refresher and refresh your list the checkbox disappears again - if the model refers to the first item

If I use ng-repeat instead of collection-repeat the problem does not occur.

I forked off of the nightly radio-button showcase to demonstrate the issue

  • The first item in the list is “bb” and that the model data is set to “bb” – nothing is selected.

  • Change $ to refer to any other item and the checkbox appears when the code is executed

  • Change collection-repeat to ng-repeat and change $ back to “bb” and it is selected as expected


I found a way to fix this issue (maybe not the best one, but it works :slight_smile:).
Here is the edition of the codepen you posted:

Basically, I added a new object at the beginning of the list passed to collection-repeat (so the bug will affect this item), but via CSS, the item is hidden and the rest of items are moved 1-item-hieght position up`.
This way you can default select the real first item of the list (the second, if we count the hidden, bug affected item).

I hope this is useful for you, bye :smiley:

P.S: I had to explicit specify on HTML the item-height and item-width of collection-repeat items, because if they are not defined, it throws an error :sweat:

If you don’t want to touch(modify) the list, I found we can use a delay for assigning list.

$timeout(function() {
    $scope.list = list;
  }, 200);

that (very little ;p)delay solved this problem :slight_smile: