Two sets of radio buttons in Ionic Framework/AngularJS

Question

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.

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.

app.js:

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');

});

controllers.js:

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 );
    }

})

tab-dash.html:

<ion-view title="Salary Calculator">
  <ion-content class="has-header">

    <div class="button-bar padding">

        <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">
          {{ item.text }}
        </ion-radio>

        </div>

    <div class="list list-inset">

        <div class="item item-divider">
                Results per {{ data.resultOptions }}
            </div>

        <div class="button-bar padding row item">

        <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">
          {{ item.text }}
        </ion-radio>

        </div>

</div>

  </ion-content>
</ion-view>

Demo plnkr showing here 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).

Answer 1

Nevermind! I just hadn't set the name value for the two groups. Sigh.

Answer 2

Just wanted to post my solution here using your realization that this needed the name attribute, in case it helps someone else. I struggled with this for a bit as I am also using this with ng-repeat. This solution worked for me:

<ion-radio ng-repeat="option in question.options" ng-model="question.response" ng-value="option.text"name="{{question.id}}">
   {{option.text}}

</ion-radio>