title: AngularJS - Using ng-repeat to create sets of radio inputs
body: <p>I'm evaluating angularjs for a future project. One of the things I will need to do is display different pages of "channel" information by selecting an appropriate "page" radio input. Furthermore, ranges of page buttons may also be selected from a group of "page set" radio inputs.</p>
  
  <p>The working example below has a set of 32 channels with the visible group of channels being selected via a combination of "set" and "page" radio inputs, giving a total of 2 * 4 pages of 4 channels each.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html ng-app&gt;
    &lt;head&gt;
      &lt;script type="text/javascript" src="angular.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
        function Channels($scope) {
          $scope.groupSize = 4;
          $scope.pageSet = 0;
          $scope.pageNumber = 0;
          $scope.channels = [
            {"id": "Ch-001"}, {"id": "Ch-002"}, {"id": "Ch-003"}, {"id": "Ch-004"},
            {"id": "Ch-005"}, {"id": "Ch-006"}, {"id": "Ch-007"}, {"id": "Ch-008"},
            {"id": "Ch-009"}, {"id": "Ch-010"}, {"id": "Ch-011"}, {"id": "Ch-012"},
            {"id": "Ch-013"}, {"id": "Ch-014"}, {"id": "Ch-015"}, {"id": "Ch-016"},
            {"id": "Ch-017"}, {"id": "Ch-018"}, {"id": "Ch-019"}, {"id": "Ch-020"},
            {"id": "Ch-021"}, {"id": "Ch-022"}, {"id": "Ch-023"}, {"id": "Ch-024"},
            {"id": "Ch-025"}, {"id": "Ch-026"}, {"id": "Ch-027"}, {"id": "Ch-028"},
            {"id": "Ch-029"}, {"id": "Ch-030"}, {"id": "Ch-031"}, {"id": "Ch-032"}
          ];
        }
      &lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body ng-controller="Channels"&gt;
      &lt;p&gt;Set:
        &lt;input type="radio" name="pageSet" ng-model="pageSet" ng-value="0"&gt;1-4&lt;/input&gt;
        &lt;input type="radio" name="pageSet" ng-model="pageSet" ng-value="1"&gt;5-8&lt;/input&gt;
      &lt;/p&gt;
      &lt;p&gt;Page:
        &lt;input type="radio" name="pageNumber" ng-model="pageNumber" ng-value="0"&gt;{{pageSet * groupSize + 1}}&lt;/input&gt;
        &lt;input type="radio" name="pageNumber" ng-model="pageNumber" ng-value="1"&gt;{{pageSet * groupSize + 2}}&lt;/input&gt;
        &lt;input type="radio" name="pageNumber" ng-model="pageNumber" ng-value="2"&gt;{{pageSet * groupSize + 3}}&lt;/input&gt;
        &lt;input type="radio" name="pageNumber" ng-model="pageNumber" ng-value="3"&gt;{{pageSet * groupSize + 4}}&lt;/input&gt;
      &lt;/p&gt;
      &lt;ul&gt;
        &lt;li ng-repeat="channel in channels | limitTo: groupSize * ((groupSize * pageSet) + pageNumber + 1) | limitTo: -groupSize"&gt;
          &lt;p&gt;{{channel.id}}&lt;/p&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My question is how to create the page/page set radio inputs using <code>ng-repeat</code>. I've tried approaches such as:</p>
  
  <pre><code>&lt;p&gt;Set: &lt;input ng-repeat="n in [0,1]" type="radio" name="pageSet" ng-model="pageSet" ng-value="{{n}}"&gt;&lt;/p&gt;
  &lt;p&gt;Page: &lt;input ng-repeat="n in [0,1,2,3]" type="radio" name="pageNumber" ng-model="pageNumber" ng-value="{{n}}"&gt;&lt;/p&gt;
  </code></pre>
  
  <p>which looks right, but the values don't bind to the corresponding pageSet/pageNumber variables. Can anyone tell what I'm missing here?</p>