title: How to dynamically add input rows to view and maintain value in angularjs ng-model as array item
body: <p>I have a situation where I want the user to dynamically add <code>&lt;input&gt;</code> rows when they want to enter a new item. As shown below, the user clicks the "Add Input Item" button and a new input element is added where the user may add text.</p>
  
  <p><img src="https://i.stack.imgur.com/P7M8Y.png" alt="enter image description here"></p>
  
  <p>I'm trying to associate each input element value to the model <code>$scope.items</code> (an array) in <code>app.js</code>. In my <code>index.html</code>, I load the <code>$scope.items</code> using an <code>ng-repeat</code>.
  What I do not understand is how I can get each input/row to automatically be added to &amp; managed by the model defined as <code>$scope.items</code>. </p>
  
  <p><em>Is it possible to map each input element to an ng-model that relates to the <code>items</code> array and, if so, how? Or, should directives be used in this situation?</em></p>
  
  <p>The full code and runtime is on Plunker <a href="http://plnkr.co/edit/qaNgfjpd6iiEhBcEELZL?p=preview" rel="nofollow noreferrer">here</a> (so that you can view the weird output).</p>
  
  <p>Snippet from <code>index.html</code>:</p>
  
  <pre><code>&lt;body ng-controller="MainCtrl"&gt;
    &lt;button ng-click="addInputItem()"&gt;+ Add Input Item&lt;/button&gt;
    &lt;div ng-repeat="item in items"&gt;
      &lt;input ng-model="items" type="text" value="{{item}}" size="40"&gt;
    &lt;/div&gt;
    &lt;pre&gt;items = {{items | json}}&lt;/pre&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The <code>app.js</code> code:</p>
  
  <pre><code>var app = angular.module('plunker', []);
  
  app.controller('MainCtrl', function($scope) {
    $scope.items = ['First Item', 'Second Item'];
    $scope.addInputItem = function() {
      $scope.items.push('');
    };
  });
  </code></pre>