I am having some troubles with ionic radio buttons. When I change the selected radio button ionic displays the checkmark correctly, however, any change is not recognized by the angular controller. More specific, the change does not affect the scope variable that is used as the ng-model for the radio buttons.
I created a plunker example to demonstrate my problem: http://embed.plnkr.co/xjakgbnevTHZwF2pCC7e/preview
In the example the chosen option is displayed in the head bar. When initializing the controller the second item is the selected one by default. Ionic seems to recognize that as the second option is checkmarked. Nevertheless selection changes are not recognizes correctly.
I would really appreciate it if anyone could help me, thanks a lot in advance!
Best regards
If you want to show it inside <ion-content> tage itself then there is no need to mention the scope hierarchy using $parent. In this case your code will work properly. Example
I believe it is related to child scope related issue. In order to get update in header you need to do declare your ng-model using $parent.$parent
APP.html
<ion-view view-title="Radio button demo">
<ion-header-bar align-title="left" class="bar-positive">
<h1 class="title">Chosen option: {{item}}</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-radio ng-repeat="i in items" ng-value="i.Id" ng-model="$parent.$parent.item" >{{i.Name}}</ion-radio>
</ion-list>
</ion-content>
</ion-view>
There should be better way than this. I found this as workaround. Thanks.