title: AngularJS multiple radio options
body: <p>Good afternoon,</p>
  
  <p>We are currently trying to learn <a href="https://angularjs.org/" rel="nofollow noreferrer">AngularJS</a> and although we're picking up some pretty cool codes we can't seem to figure this issue out.</p>
  
  <p>We are wanting to display a list of product options relative to the selected product within the dropdown feature from here we want to be able to tick one radio button on each row but at the moment when we tick one of the radio buttons it seems to be selecting all within each of the columns.</p>
  
  <p>We've attached our code snippets and screenshots, if anyone could help us we'd greatly appreciate it. </p>
  
  <p>Thank you.
  <strong>Original Plnkr</strong>
  <a href="http://embed.plnkr.co/bpMoLNnf4zs5VK4kx1JJ/preview" rel="nofollow noreferrer">http://embed.plnkr.co/bpMoLNnf4zs5VK4kx1JJ/preview</a></p>
  
  <p><strong>Original HTML</strong>   </p>
  
  <pre><code> &lt;div class="form-group"&gt;
      &lt;h3&gt;Product&lt;/h3&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group"&gt;
      &lt;div&gt;
          &lt;select ng-model="formData.product" ng-options="product.name for product in products" style="color:#000;"&gt;&lt;/select&gt;
      &lt;/div&gt;
  
      &lt;div ng-show="formData.product.name=='Petrol Lawnmower'"&gt;
          &lt;div ng-repeat="visualItem in visualItems"&gt;
              &lt;label for=""&gt;{{visualItem.name}}&lt;/label&gt;
              &lt;input type="radio" name="{{visualItem.id}}" ng-model="formData.visualItems.one" ng-value="visualItem.one"/&gt;
              &lt;input type="radio" name="{{visualItem.id}}" ng-model="formData.visualItems.two" ng-value="visualItem.two"/&gt;
              &lt;input type="radio" name="{{visualItem.id}}" ng-model="formData.visualItems.three" ng-value="visualItem.three"/&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group row"&gt;
  &lt;div class="col-xs-6 col-xs-offset-3"&gt;
      &lt;a ui-sref="{{formData.product.url}}" class="btn btn-block btn-info"&gt;
          Next Section &lt;span class="glyphicon glyphicon-circle-arrow-right"&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;a ui-sref="form.usage" class="btn btn-block btn-info"&gt;
          &lt;span class="glyphicon glyphicon-circle-arrow-left"&gt;&lt;/span&gt; Previous Section
      &lt;/a&gt;
      &lt;br/&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Original JS</strong></p>
  
  <pre><code> // Products
      $scope.products = [
          {id: '1', name: 'Petrol Lawnmower' },
          {id: '2', name: 'Electric Lawnmower'},
          {id: '3', name: 'Petrol Chainsaw'},
          {id: '4', name: 'Electric Chainsaw'},
          {id: '5', name: 'Petrol Timmer'},
          {id: '6', name: 'Electric Timmer'},
          {id: '7', name: 'Etc'}
      ];
      $scope.product = {
          productItems: [{
              Product: $scope.products[0]
          }]
      }
      // Visual Test
      $scope.visualItems = [
          { id:'1', name: 'Fuel Empty', one: 'red', two: 'amber', three: 'green'},
          { id:'2', name: 'Oil Empty', one: 'red', two: 'amber', three: 'green'},
          { id:'3', name: 'Spark Plug', one: 'red', two: 'amber', three: 'green'},
          { id:'4', name: 'Air Filter', one: 'red', two: 'amber', three: 'green'},
          { id:'5', name: 'Blade', one: 'red', two: 'amber', three: 'green'},
          { id:'6', name: 'Pull Start', one: 'red', two: 'amber', three: 'green'},
          { id:'7', name: 'Deck', one: 'red', two: 'amber', three: 'green'},
          { id:'8', name: 'Wheels', one: 'red', two: 'amber', three: 'green'},
          { id:'9', name: 'Handles', one: 'red', two: 'amber', three: 'green'},
          { id:'10', name: 'Throttle/Pull Cable', one: 'red', two: 'amber', three: 'green'},
          { id:'11', name: 'Primer Bulb', one: 'red', two: 'amber', three: 'green'},
          { id:'12', name: 'Grass Box', one: 'red', two: 'amber', three: 'green'},
          { id:'13', name: 'Fuel Pipe', one: 'red', two: 'amber', three: 'green'}
      ];
      $scope.visualItem = {
          visual: [{
              VisualItem: $scope.visualItems[0]
          }]
      }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/pgD1h.png" alt="enter image description here">
  <img src="https://i.stack.imgur.com/iEOrG.png" alt="enter image description here">
  <img src="https://i.stack.imgur.com/lNWx6.png" alt="enter image description here"></p>
  
  <p><strong>Updated HTML</strong></p>
  
  <pre><code>&lt;div class="form-group"&gt;
      &lt;h3&gt;Product&lt;/h3&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group"&gt;
      &lt;div&gt;
          &lt;select ng-model="formData.product" ng-options="product.name for product in products" style="color:#000;"&gt;&lt;/select&gt;
      &lt;/div&gt;
  
      &lt;div ng-show="formData.product.name=='Petrol Lawnmower'"&gt;
          &lt;div ng-repeat="visualItem in visualItems"&gt;
              &lt;label for=""&gt;{{visualItem.name}}&lt;/label&gt;
              &lt;input type="radio" name="{{visualItem.id}}" ng-model="visualItem.one.isSelected" ng-value="visualItem.one"/&gt;
              &lt;input type="radio" name="{{visualItem.id}}" ng-model="visualItem.one.isSelected" ng-value="visualItem.one"/&gt;
              &lt;input type="radio" name="{{visualItem.id}}" ng-model="visualItem.one.isSelected" ng-value="visualItem.one"/&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group row"&gt;
  &lt;div class="col-xs-6 col-xs-offset-3"&gt;
      &lt;a ui-sref="{{formData.product.url}}" class="btn btn-block btn-info"&gt;
          Next Section &lt;span class="glyphicon glyphicon-circle-arrow-right"&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;a ui-sref="form.usage" class="btn btn-block btn-info"&gt;
          &lt;span class="glyphicon glyphicon-circle-arrow-left"&gt;&lt;/span&gt; Previous Section
      &lt;/a&gt;
      &lt;br/&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Updated JS</strong></p>
  
  <pre><code>angular.module('formApp', ['ngAnimate', 'ui.router'])
  
  .config(function($stateProvider, $urlRouterProvider) { 
      $stateProvider
          .state('form', {
              url: '/form',
              templateUrl: 'form.html',
              controller: 'formController'
          })
  
          .state('form.packaging', {
              url: '/packaging',
              templateUrl: 'form-packaging.html'
          })
          .state('form.usage', {
              url: '/usage',
              templateUrl: 'form-usage.html'
          })
          .state('form.product', {
              url: '/product',
              templateUrl: 'form-product.html'
          })   
          .state('form.payment', {
              url: '/payment',
              templateUrl: 'form-payment.html'
          });
      $urlRouterProvider.otherwise('/form/packaging');
  })
  
  .controller('formController', function($scope) {
  
      // Products
      $scope.products = [
          {id: '1', name: 'Petrol Lawnmower' },
          {id: '2', name: 'Electric Lawnmower'},
          {id: '3', name: 'Petrol Chainsaw'},
          {id: '4', name: 'Electric Chainsaw'},
          {id: '5', name: 'Petrol Timmer'},
          {id: '6', name: 'Electric Timmer'},
          {id: '7', name: 'Etc'}
      ];
      $scope.product = {
          productItems: [{
              Product: $scope.products[0]
          }]
      }
      // Visual 
      $scope.visualItems = [
          { 
              id:'1', 
              name: 'Fuel Empty', 
              one: {color: 'red', isSelected: 'false'},
              two: {color: 'amber', isSelected: 'false'},
              three: {color: 'green', isSelected: 'false'}
          },
          { 
              id:'2', 
              name: 'Oil Empty'
              one: {color: 'red', isSelected: 'false'},
              two: {color: 'amber', isSelected: 'false'},
              three: {color: 'green', isSelected: 'false'}
          },
          { 
              id:'3', 
              name: 'Spark Plug'
              one: {color: 'red', isSelected: 'false'},
              two: {color: 'amber', isSelected: 'false'},
              three: {color: 'green', isSelected: 'false'}
          },
          { 
              id:'4', 
              name: 'Air Filter',
              one: {color: 'red', isSelected: 'false'},
              two: {color: 'amber', isSelected: 'false'},
              three: {color: 'green', isSelected: 'false'}
          },
          { 
              id:'5', 
              name: 'Blade',
              one: {color: 'red', isSelected: 'false'},
              two: {color: 'amber', isSelected: 'false'},
              three: {color: 'green', isSelected: 'false'}
          },
          { 
              id:'6', 
              name: 'Pull Start', 
              one: {color: 'red', isSelected: 'false'},
              two: {color: 'amber', isSelected: 'false'},
              three: {color: 'green', isSelected: 'false'}
          },
          { 
              id:'7', 
              name: 'Deck', 
              one: {color: 'red', isSelected: 'false'},
              two: {color: 'amber', isSelected: 'false'},
              three: {color: 'green', isSelected: 'false'}
          },
          { 
              id:'8', 
              name: 'Wheels',
              one: {color: 'red', isSelected: 'false'},
              two: {color: 'amber', isSelected: 'false'},
              three: {color: 'green', isSelected: 'false'}
          },
          { 
              id:'9', 
              name: 'Handles',
              one: {color: 'red', isSelected: 'false'},
              two: {color: 'amber', isSelected: 'false'},
              three: {color: 'green', isSelected: 'false'}
          },
          { 
              id:'10', 
              name: 'Throttle/Pull Cable',
              one: {color: 'red', isSelected: 'false'},
              two: {color: 'amber', isSelected: 'false'},
              three: {color: 'green', isSelected: 'false'}
          },
          { 
              id:'11', 
              name: 'Primer Bulb', 
              one: {color: 'red', isSelected: 'false'},
              two: {color: 'amber', isSelected: 'false'},
              three: {color: 'green', isSelected: 'false'}
          },
          { 
              id:'12', 
              name: 'Grass Box', 
              one: {color: 'red', isSelected: 'false'},
              two: {color: 'amber', isSelected: 'false'},
              three: {color: 'green', isSelected: 'false'}
          },
          { 
              id:'13', 
              name: 'Fuel Pipe', 
              one: {color: 'red', isSelected: 'false'},
              two: {color: 'amber', isSelected: 'false'},
              three: {color: 'green', isSelected: 'false'}
          }
      ];
      $scope.visualItem = {
          visual: [{
              VisualItem: $scope.visualItems[0]
          }]
      }
  
  
  
      // we will store all of our form data in this object
      $scope.formData = {};
      // function to process the form
      $scope.processForm = function() {
          alert('awesome!');  
      };
  
  });
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/4FVBG.png" alt="enter image description here"></p>
  
  <p><strong>Updated Plnkr</strong>
  <a href="http://plnkr.co/edit/Dve2jQJ4tHN0y8AUKT2Z" rel="nofollow noreferrer">http://plnkr.co/edit/Dve2jQJ4tHN0y8AUKT2Z</a></p>