Ionic radio buttons - changes are not recognized by controller scope

Question

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

Answer 1

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>

Working Plunkr

---

The better way to solve this issue would be using either Dot Rule or controllerAs(eliminating $scope, using this inside controller) pattern.