add add - 3 months ago 28x
AngularJS Question

Ionic AngularJS Radio Group ng-model issue using ion-radio

I'm unable to retrieve the value of the Radio Group using AngularJS 1.4.7 with Ionic 1.1.1;

Any ideas would be great, thanks.

See codepen snippet of the issue:


<html ng-app="app">
<link rel="stylesheet" href="" />
<link href="" rel="stylesheet">
<script src=""></script>
<body ng-controller="myCtrl">
<ion-content padding="true">

<form class="list" ng-submit="Pass(test)">
<p>Selected Sample: {{test.val}}</p>
<ion-radio ng-model="test.val" ng-value="s1">Sample 1</ion-radio>
<ion-radio ng-model="test.val" ng-value="s2">Sample 2</ion-radio>
<button class="button button-energized button-large icon-right button-full">Test</button>



angular.module('app', ['ionic'])
.controller('myCtrl', function($scope) {
$scope.Pass = function($test) {
alert("Test: "+$test.val);


Try the following:

angular.module('app', ['ionic'])
.controller('myCtrl', function($scope) {
 $scope.test = {};
 $scope.Pass = function($test) {
   alert("Test: "+ $scole.test.val);


  1. $test is not defined in your $scope.
  2. variables starting with $ have a special meaning in angular, so you shouldn't use them as regular variable names

Update: It's also important to singelquote a string value within the double quoted ng-value

<ion-radio ng-model="test.val" ng-value="'s1'">Sample 1</ion-radio>