Ionic popup radio buttons

Issue

I would like to implement $ionicPopup with radio buttons. However, what I tried doesn't work as expected. I should have 3 options to choose, so if I choose option '1' and press 'Yes', I would like the console log to print out '1'...so far I can't seem to connect the radio buttons with it's equivalent scope variable in controller.

How can I reflect changes from radio button partial that loads in ionic popup?

In controller:

$ionicPopup.confirm({
                    templateUrl: 'templates/partials/orderPopup.html',
                    title: 'XYZ?',
                    scope: $scope,
                    buttons: [{
                        text: 'Yes',
                        type: 'button-positive',
                        onTap: function (e) {
                            console.log($scope.choice);
                        }
                    }, {
                        text: 'No',
                        type: 'button-default',
                        onTap: function (e) {
                            $state.go('shoppingCart');
                        }
                    }]
                })

And in view:

<ion-list ng-controller="shoppingCartCtrl">
    <style>
        .wrapping-list .item-content, .wrapping-list .item {
            overflow: initial;
            white-space: initial;
        }
    </style>
    <ion-radio class="wrapping-list" ng-model="choice" ng-value="'1'">Option1</ion-radio>
    <ion-radio class="wrapping-list" ng-model="choice" ng-value="'2'">Option2</ion-radio>
    <ion-radio class="wrapping-list" ng-model="choice" ng-value="'3'">Option3</ion-radio>
</ion-list>

If I make a $scope.choice = 2 before the popup call, then I can see the option 2 being selected as a default, however, upon clicking any other option and then clicking OK, console returns 2

Solution

The issue is with ng-model. The 2-way binding in angular works when he model is an object which can be updated via reference from view as well as controller. So if you change your model as below, your code will work:

Controller

$scope.choice = {
  value: '2'
};

HTML:

<ion-radio class="wrapping-list" ng-model="choice.value" ng-value="'1'">
  Option1
</ion-radio>
<ion-radio class="wrapping-list" ng-model="choice.value" ng-value="'2'">
  Option2 
</ion-radio>
<ion-radio class="wrapping-list" ng-model="choice.value" ng-value="'3'">
  Option3
</ion-radio>

I have created a codepen to demonstrate the working code here: http://codepen.io/addi90/pen/aNroNN?editors=1010

Answered By - Aditya Singh