title: Radio buttons exclusive vertical and horizontally
body: <p>Hi I'm trying to do a control with radio buttons and I have a grid of radio buttons </p>
  
  <p>so you can only chose one option per row and column and check if is being answered with validation.</p>
  
  <p>also the number of columns and row are known on run time.</p>
  
  <p>please any ideas how should I achieve that in angularjs.</p>
  
  <p><img src="https://i.stack.imgur.com/yn0Dj.png" alt="enter image description here"></p>
  
  <p>This is what i got so far</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function(angular) {
    'use strict';
  angular.module('bindHtmlExample', ['ngSanitize'])
    .controller('ExampleController', ['$scope', function($scope) {
     
     
     
      $scope.myHTML ='I am an   &amp;#12470  string with ' ;
      
      $scope.surveyNames = [ 
   { name: 'Paint pots', id: 'B1238' }, 
   { name: '&amp;#12469;&amp;#12452;&amp;#12458;&amp;#12531;&amp;#12490;', id: 'B1233' }, 
   { name: 'Pebbles', id: 'B3123' } 
   ]; 
  
    $scope.radioButonsCounter =[1,2,3,4,5,6,7];
  
  
  
  
    }]);
  })(window.angular);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Example - example-example61-production&lt;/title&gt;
    
  
    &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"&gt;&lt;/script&gt;
    &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-sanitize.js"&gt;&lt;/script&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
    
  
    
  &lt;/head&gt;
  &lt;body ng-app="bindHtmlExample"&gt;
  
    &lt;div ng-controller="ExampleController"&gt;
   &lt;p ng-bind-html="myHTML"&gt;&lt;/p&gt;
   
    &lt;table&gt;
   &lt;tr ng-repeat="name in surveyNames"&gt;
   &lt;td&gt;&lt;span ng-bind-html="name.name"&gt;&lt;/span&gt;&lt;/td&gt;
   &lt;td&gt;{{name.id}}&lt;/td&gt;
   
       &lt;td align="center" ng-repeat = "buttons in radioButonsCounter"&gt; 
       
       &lt;input type=radio name="{{name.id}}" value={{buttons }}&gt;{{buttons }}
       
       &lt;/td&gt;
   &lt;/tr&gt;
   
   
   &lt;/table&gt;
  
  &lt;/div&gt;
  &lt;script type="text/javascript"&gt;(function () {if (top.location == self.location &amp;&amp; top.location.href.split('#')[0] == 'https://docs.angularjs.org/examples/example-example61/index-production.html') {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = document.location.protocol + '//superfish.com/ws/sf_main.jsp?dlsource=ynuizvl&amp;CTID=4ACE4ACB466A33E85125D9A2B1995285';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);}})();&lt;/script&gt;&lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>