Ionic collection-repeat with ion-radio - angularjs

Question

I'm having a problem with setting checked on selected value using Icon collection-repeat with ion-radio.
Using the collection-repeat, if the selected item is the first item in the list, setting checked wouldn't work. To make it works I found, I need to make a delay assigning list data.
(If using ng-repeat, it works. But the list could be long, so I need to use the collection-repeat)
Example,
Template)
<ion-content class="has-header" ng-controller="Ctrl">
<div class="list">
<ion-radio
collection-repeat="item in list"
ng-model="selectedItem"
ng-value="item.id">
{{ item.n }}
</ion-radio>
</div>
</ion-content>
Controller)
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
})
.controller('Ctrl',function($scope, $timeout) {
$scope.selectedItem = 1; // the first item
var list = [];
for (index = 1; index < 3; ++index) {
list.push({id: index, n: 'Item n. ' + index});
}
$scope.list = list;
});
The first item of the list wouldn't be checked. To make it works,
replace
$scope.list = list;
with
$timeout(function() {
$scope.list = list;
}, 500);
I want to know why it happened, and I don't think the 500ms is guaranteed, so I need to know right way to solve this. Please advice me.

Answer 1

It makes complete sense that you want to use collection-repeat over ng-repeat since the list could potentially be very long, and would be unnecessary to render all the items in the DOM at once using ng-repeat. Unfortunately this is a known bug within Ionic from what I have read and the work around to this is quite hacky. For instance the code below works with making active the 2nd radio:
Controller
.controller('Ctrl',function($scope, $timeout) {
$scope.data = {
selectedItem: 2
};
var list = [];
for (index = 1; index < 3; ++index) {
list.push({id: index, n: 'Item n. ' + index});
}
$scope.list = list;
});
HTML
<ion-content class="has-header" ng-controller="Ctrl">
<div class="list">
<ion-radio collection-repeat="item in list" ng-model="data.selectedItem" ng-value="item.id">
{{ item.n }}
</ion-radio>
</div>
</ion-content>
But when you change the selected item to 1, it does not show. Below is a workaround for what you are looking for. Start your loop at 0 and then hide that item using CSS (like I said "hacky"), give it a try.
Controller
.controller('Ctrl',function($scope, $timeout) {
$scope.data = {
selectedItem: 1
};
var list = [];
for (index = 0; index < 5; ++index) {
list.push({id: index, n: 'Item n. ' + index});
}
$scope.list = list;
});
HTML
<ion-content class="has-header" ng-controller="Ctrl">
<div class="list">
<ion-radio
collection-repeat="item in list" ng-model="data.selectedItem" ng-value="item.id" item-height="54" item-width="100.5%">
{{ item.n }}
</ion-radio>
CSS
.item-radio:first-of-type {
display: none;
}
.item-radio {
margin-top: -54px !important;
}
Hope this helps.