<!DOCTYPE html>
<html>

  <head>
    <link data-require="ionic@*" data-semver="1.0.0-beta6" rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.6/css/ionic.css" />
    <script data-require="ionic@*" data-semver="1.0.0-beta6" src="http://code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="RadioDemo">
      <ion-nav-view></ion-nav-view>
  </body>

</html>
angular.module("RadioDemo", ["ionic"])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider

  // setup an abstract state for the tabs directive
    .state('app', {
    url: "/app",
    templateUrl: "app.html",
    controller: "MainCtrl"
  });
  
  $urlRouterProvider.otherwise("/app");
})

.controller("MainCtrl", function($scope) {
  $scope.items = [
    { Id: 1, Name: "Test 1" },
    { Id: 2, Name: "Test 2" },
    { Id: 3, Name: "Test 3" }
  ];
  
  $scope.item = 2;
});
/* Styles go here */

<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-model="item" ng-value="i.Id" ng-repeat="i in items">{{i.Name}}</ion-radio>
    </ion-list>
  </ion-content>
</ion-view>