title: Two sets of radio buttons in Ionic Framework/AngularJS
body: <p>I have two sets of radio buttons both with the same values.  One of them is the user input, and one is for displaying the results after.</p>
  
  <p>I'm able to save the values properly, but the problem is that only one radio button is showing as active at any time.  What I really want is to have one radio be active for each set.</p>
  
  <p>app.js:</p>
  
  <pre><code>angular.module('starter', ['ionic', 'starter.controllers'])
  
  .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('tab', {
        url: "/tab",
        abstract: true,
        templateUrl: "templates/tabs.html"
      })
  
      .state('tab.dash', {
        url: '/dash',
        views: {
          'tab-dash': {
            templateUrl: 'templates/tab-dash.html',
            controller: 'DashCtrl'
          }
        }
      })        
  
    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise('/tab/dash');
  
  });
  </code></pre>
  
  <p>controllers.js:</p>
  
  <pre><code>angular.module('starter.controllers', [])
  
  .controller('DashCtrl', function($scope, $window, $ionicPlatform) {
  
      $ionicPlatform.ready(function() {
          // Ready functions
      });
  
      $scope.grossOptionsList = [
      { text: "Year", value: "year" },
      { text: "Month", value: "month" },
      { text: "Week", value: "week" },
      { text: "Day", value: "day" }
      ];
  
      $scope.resultsOptionsList = [
      { text: "Year", value: "year" },
      { text: "Month", value: "month" },
      { text: "Week", value: "week" },
      { text: "Day", value: "day" }
      ];
  
  // Default values
      $scope.data = {};
      $scope.data.grossOptions = 'year';
      $scope.data.resultOptions = 'month';
  
  
      $scope.updateGrossOptions = function(item) {
          console.log( 'Gross option: ' + item.value );
      }
  
      $scope.updateResultOptions = function(item) {
          console.log( 'Results option: ' + item.value );
      }
  
  })
  </code></pre>
  
  <p>tab-dash.html:</p>
  
  <pre><code>&lt;ion-view title="Salary Calculator"&gt;
    &lt;ion-content class="has-header"&gt;
  
      &lt;div class="button-bar padding"&gt;
  
          &lt;ion-radio ng-repeat="item in grossOptionsList"
                     ng-value="item.value"
                     ng-model="data.grossOptions"
                     ng-change="updateGrossOptions(item)"
                     class="button button-positive button-outline"&gt;
            {{ item.text }}
          &lt;/ion-radio&gt;
  
          &lt;/div&gt;
  
      &lt;div class="list list-inset"&gt;
  
          &lt;div class="item item-divider"&gt;
                  Results per {{ data.resultOptions }}
              &lt;/div&gt;
  
          &lt;div class="button-bar padding row item"&gt;
  
          &lt;ion-radio ng-repeat="item in resultsOptionsList"
                     ng-value="item.value"
                     ng-model="data.resultOptions"
                     ng-change="updateResultOptions(item)"
                     class="button button-positive button-outline"&gt;
            {{ item.text }}
          &lt;/ion-radio&gt;
  
          &lt;/div&gt;
  
  &lt;/div&gt;
  
    &lt;/ion-content&gt;
  &lt;/ion-view&gt;
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/oyy5U1JxxkrfKGgUfUMF?p=preview" rel="noreferrer"><strong>Demo plnkr showing here</strong></a> that I can set the values for each of the radio button groups, but I want to have one set for each (i.e. month for input and day for result).</p>