title: How to have dynamically created form elements in AngularJS?
body: <p>My view has:</p>
  
  <pre><code>  &lt;div class="well well-sm" ng-repeat="item in receivingItems"&gt;
      {{ item.sku }}: {{ item.description }}&lt;br /&gt;
      &lt;form class="form-horizontal" role="form"&gt;
        &lt;div class="form-group"&gt;
          &lt;label class="col-sm-2 control-label"&gt;Quantity&lt;/label&gt;
          &lt;div class="col-sm-10"&gt;
            &lt;input type="number" class="form-control" placeholder=""&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;label class="col-sm-2 control-label"&gt;Lot&lt;/label&gt;
          &lt;div class="col-sm-10"&gt;
            &lt;input type="text" class="form-control" placeholder=""&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/div&gt;
    &lt;form class="form-inline" role="form"&gt;
      &lt;div class="form-group"&gt;
        &lt;label class="sr-only"&gt;SKU&lt;/label&gt;
        &lt;input type="text" ng-model="receivingValue" placeholder="SKU" typeahead="sku for sku in getSku($viewValue) | filter:$viewValue" typeahead-on-select="selectedSku()" class="form-control" autocomplete="off" autocapitalize="off"&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p>In my controller, I have:</p>
  
  <pre><code>  $scope.selectedSku = function() {
      var sku = $scope.receivingValue.split(':')[0];
      ItemService.getBySku(CompanyService.getCompany()._id, $scope.selectedClient._id, sku).then(function(response) {
        $scope.receivingItems.push(response.data.item);
        $scope.receivingValue = null;
      });
    }
  </code></pre>
  
  <p>So this does what you'd expect. When you search for a SKU, it creates a new form with a <strong>Quantity</strong> and <strong>Lot</strong> field. But now when I submit the overall form, I want those values to somehow be stored and saved. So how can I use <code>ng-model</code> (or do I not have to?) for dynamic field elements?</p>