title: Repeat code on button click with AngularJS
body: <p>I want to create a page where you can add from 1 to n products dinamically.</p>
  
  <p>I've been working with AngularJS for a couple of months but it's kind of difficult for me to think this.</p>
  
  <p>The html code I tought about it's something like this:</p>
  
  <p><a href="https://plnkr.co/edit/2MYbkYeAf4lZSRIh2c8l?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/2MYbkYeAf4lZSRIh2c8l?p=preview</a></p>
  
  <p>Here it is the entire template:</p>
  
  <pre><code>&lt;div class="container text-center"&gt;
      &lt;h1&gt;Make a sale&lt;/h1&gt;
      &lt;br&gt;
      &lt;form&gt;
          &lt;div class = "divedp"&gt;
              &lt;label for="idNumeroFactura" class="col-form-label" &gt;Invoice number: &lt;/label&gt;
              &lt;input name="inpNumeroFactura" id="idNumeroFactura" maxlength= "8" type="text" ng-model="numeroFactura" class= "form-control"/&gt;
          &lt;/div&gt;
          &lt;h6 class="small"&gt;products&lt;/h6&gt;
          &lt;div class = "divedp"&gt;
              &lt;label for="idProducto"&gt;Product: &lt;/label&gt;
              &lt;select name="sltProducto" ng-options ="producto.nombreProducto for producto in productos"
                  ng-model="producto" class="form-control input-sm" id="idProducto"&gt;
                  &lt;option value=""&gt;-Choose the product-&lt;/option&gt;
              &lt;/select&gt; 
               &lt;br&gt;
              &lt;label for= "idCantidad" &gt;Quantity: &lt;/label&gt;
              &lt;select ng-model="cantidad" id="idCantidad" class="form-control input-sm"&gt;
                  &lt;option value="1"&gt;1&lt;/option&gt;
                  &lt;option value="2"&gt;2&lt;/option&gt;
                  &lt;option value="3"&gt;3&lt;/option&gt;
                  &lt;option value="4"&gt;4&lt;/option&gt;
                  &lt;option value="5"&gt;5&lt;/option&gt;
                  &lt;option value="6"&gt;6&lt;/option&gt;
                  &lt;option value="7"&gt;7&lt;/option&gt;
                  &lt;option value="8"&gt;8&lt;/option&gt;
                  &lt;option value="9"&gt;9&lt;/option&gt;
              &lt;/select&gt;
              &lt;br&gt;
              &lt;button ng-click="showDiv=true; agregarProducto()" class="btn btn-default" ng-hide="showDiv"&gt; Add another product&lt;/button&gt;
          &lt;/div&gt;
          &lt;div ng-show="showDiv"&gt; Here should appear the new product&lt;/div&gt;
  
          &lt;button ng-click="guardarVenta()" class="btn btn-primary" type="submit"&gt;Save sale&lt;/button&gt;
      &lt;/form&gt;
      &lt;span &gt;{{mensaje}}&lt;/span&gt; &lt;br&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is the part I want to repeat:</p>
  
  <pre><code>&lt;div class = "divedp"&gt;
      &lt;label for="idProducto"&gt;Product: &lt;/label&gt;
      &lt;select name="sltProducto" ng-options ="producto.nombreProducto for producto in productos"
          ng-model="producto" class="form-control input-sm" id="idProducto"&gt;
          &lt;option value=""&gt;-Choose the product-&lt;/option&gt;
      &lt;/select&gt; 
       &lt;br&gt;
      &lt;label for= "idCantidad" &gt;Quantity: &lt;/label&gt;
      &lt;select ng-model="cantidad" id="idCantidad" class="form-control input-sm"&gt;
          &lt;option value="1"&gt;1&lt;/option&gt;
          &lt;option value="2"&gt;2&lt;/option&gt;
          &lt;option value="3"&gt;3&lt;/option&gt;
          &lt;option value="4"&gt;4&lt;/option&gt;
          &lt;option value="5"&gt;5&lt;/option&gt;
          &lt;option value="6"&gt;6&lt;/option&gt;
          &lt;option value="7"&gt;7&lt;/option&gt;
          &lt;option value="8"&gt;8&lt;/option&gt;
          &lt;option value="9"&gt;9&lt;/option&gt;
      &lt;/select&gt;
      &lt;br&gt;
      &lt;button ng-click="showDiv=true; agregarProducto()" class="btn btn-default" ng-hide="showDiv"&gt; Add another product&lt;/button&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>So when I click <em>add another product</em> button, all div code part should repeat below the first div. This way, the user can choose all products he want with the quantity he want.</p>
  
  <p>I was thinking on creating a template, but this is already a template... I'm using ui-router to do the routering part, but I never repeated a template inside a template, and I never used a template inside a template at all.</p>
  
  <p>Besides, this approach gives me some doubts:</p>
  
  <ul>
  <li>How can I concatenate an attribute on a Json array? (I use Json to communicate between frontend and backend)</li>
  <li>How can I avoid users to repeat the same product item? should I take this problem to an AngularJS controller or can I handle it with directives?</li>
  </ul>
  
  <p>Thanks for reading.</p>