title: Dynamically add element to DOM in angular
body: <p>This is how my page looks like on initial load</p>
  
  <pre><code>&lt;body&gt;
   &lt;div class="col-md-12" id="dataPanes"&gt;
     &lt;div class="row dataPane"&gt; Chunk of html elements &lt;/div&gt;
   &lt;/div&gt;
  
   &lt;div class"col-md-12 text-right"&gt;
     &lt;input type="button" class="btn btn-primary" value="Add dynamic row" ng-click="addElementChunk()" /&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I am in need to add rows to div#dataPanes on button click <br/>
  If I was using jQuery,addElementChunk() function would have looked as below</p>
  
  <pre><code>var addElementChunk = function()
  {
     var html = "&lt;div class='row dataPane'&gt; Chunk of html elements &lt;/div&gt;";
     $("#dataPanes").append(html);
  }
  </code></pre>
  
  <blockquote>
    <p>but how do I implement the same in angular??</p>
  </blockquote>