Radio Button Values Not Restored When View Caching Switched On

I’m restoring my radio buttons within the beforeEnter event for my views:

    $scope.formdata = [];

    $scope.$on("$ionicView.beforeEnter", function() {

        $scope.formdata.mobility = "2";

    });

The HTML looks like:

    <div class="list">
        <ion-radio-fix ng-model="formdata.mobility" value="1">ABC</ion-radio-fix>
        <ion-radio-fix ng-model="formdata.mobility" value="2">DEF</ion-radio-fix>
        <ion-radio-fix ng-model="formdata.mobility" value="3">GHI</ion-radio-fix>
        <ion-radio-fix ng-model="formdata.mobility" value="4">JKL</ion-radio-fix>
        <ion-radio-fix ng-model="formdata.mobility" value="5">MNO</ion-radio-fix>
    </div>

When navigating “forward” (using state.go) into the view “DEF” is selected - great!

But when navigating “backward” into the view (using href not goBack) “DEF” isn’t selected.

This used to work, and I think it broke when the ion-radio-fix for iOS 9 was applied. Something to do with the navigation history when going backwards I suppose.

The only way I’ve found to fix is to set cache-view=“false” on the ion-view containing the radio buttons. Then it works as before.

Any insights?

I also faced same issue and because of this I’ve to create and use my own custom radio control. Pls update once this is fixed.

Wow I feel stupid. I realized it’s because of the missing name attribute each set of radio buttons are being grouped together. So when you select one, the selection from a previous group is lost. Disabling caching hides the problem because the view div with the previous group is removed from the DOM.

Simple fix is to add name:

<div class="list">
    <ion-radio-fix name="formdata.mobility" ng-model="formdata.mobility" value="1">ABC</ion-radio-fix>
    <ion-radio-fix name="formdata.mobility" ng-model="formdata.mobility" value="2">DEF</ion-radio-fix>
    <ion-radio-fix name="formdata.mobility" ng-model="formdata.mobility" value="3">GHI</ion-radio-fix>
    <ion-radio-fix name="formdata.mobility" ng-model="formdata.mobility" value="4">JKL</ion-radio-fix>
    <ion-radio-fix name="formdata.mobility" ng-model="formdata.mobility" value="5">MNO</ion-radio-fix>
</div>

Note that name can be anything, as long as it’s unique to that group of radio buttons.