title: AnguarJS: Bind dynamically created controls to model
body: <p>I need to create a GUI on the fly depending on the input of the user. One use case is, that the user enters the number of headlines he/she wants to have on a generated report. Therefore I render input controls via ng-repeat which works fine. In those rendered input tags it must be possible to enter the headline for the report. </p>
  
  <p>The only problem is that I have no clue how to bind the input of the textboxes to a model because the number of the input controls are different every time.</p>
  
  <p>The View:</p>
  
  <pre><code>&lt;div ng-app&gt;
      &lt;div ng-controller="Controller"&gt;
          &lt;input type="number" ng-model="numberOfCtrls"/&gt;
          &lt;div ng-repeat="i in getTimes(numberOfCtrls) track by $index"&gt;
              &lt;input type="text" style="width:100px;" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The Controller:</p>
  
  <pre><code>function Controller($scope){
   $scope.numberOfCtrls = 0;   
   $scope.tempNumber = 0;
  
   $scope.getTimes = function(number){
  
     return new Array(number);   
   };
  }
  </code></pre>
  
  <p>See <a href="http://jsfiddle.net/5dzvnbtt/" rel="nofollow">http://jsfiddle.net/5dzvnbtt/</a></p>
  
  <p>Thxs in advance</p>