title: Create a dynamic table in Angular based on the amount of rows chosen in a drop down list
body: <p>I am trying to learn AngularJS 1.6 and I am trying to populate a table with rows depending on the amount of rows selected in a dropdown list. It could be anywhere from 1 to 12. So far I have the following code. </p>
  
  <pre><code> &lt;body ng-controller="myController"&gt;
      &lt;div&gt;
          &lt;p&gt;Blue Corner Boxer: &lt;/p&gt; &lt;input type="text" ng-model="nameBlue"&gt;
          &lt;br&gt;
          &lt;p&gt;Red Corner Boxer: &lt;/p&gt; &lt;input type="text" ng-model="nameRed"&gt;
          &lt;br&gt;
          &lt;p&gt;Number of Rounds:&lt;/p&gt; &lt;select ng-model="selectedRounds"&gt;&lt;option ng-repeat="x in rounds"&gt;{{x}}&lt;/option&gt;&lt;/select&gt;
      &lt;/div&gt;
  
      &lt;div&gt;
              &lt;table class="table table-striped"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th style="text-align:center"&gt;{{nameBlue}}&lt;/th&gt;
                              &lt;th style="text-align:center"&gt;Round&lt;/th&gt;
                              &lt;th style="text-align:center"&gt;{{nameRed}}&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody class="tablerows"&gt;
                         &lt;tr ng-repeat="x in selectedRounds"&gt;
                             &lt;td&gt;Test&lt;/td&gt;
                             &lt;td&gt;Test&lt;/td&gt;
                             &lt;td&gt;Test&lt;/td&gt;
                         &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
  
                  &lt;h2 style="text-align: center"&gt;Final Score: &lt;/h2&gt; {{scoreBlue1 + ScoreBlue2}}
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Then in the js file</p>
  
  <pre><code>//Create the module
  var myApp = angular.module("myModule", []);
  
  
  
  //Create the controller and register the module in one line
  myApp.controller("myController", function ($scope) {
      $scope.message = "AngularJS tutorial";
      $scope.score = [1,2,3,4,5,6,7,8,9,10];
      $scope.rounds = [1,2,3,4,5,6,7,8,9,10,11,12];
  });
  </code></pre>
  
  <p>So far the table will add 1 row on selection of anything 1 to 9, but 10 to 12 adds 2 rows. So I think I am wondering how to create an array length of size "selectedrounds" that will repeat rows with the repeater. </p>
  
  <p>Thanks</p>