title: Add row function to push new object in angular ng-repeat
body: <p>I have one ng-repeat for parent Objects inside Master Object. I also have another ng-repeat for child objects for each parent object.</p>
  
  <p>child object has two textboxes and one actionCode attribute . 
  When I click on add row I want to set action code of new row object to A.</p>
  
  <pre><code>&lt;tbody ng-repeat= "parent in master.parentList"&gt;
      &lt;tr ng-class="pNumRow" &gt;
          &lt;td class="dropdown action display-none arrow"&gt;&lt;img src="images/icon_down.png" id="dropdownMenu2"  class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"/&gt;
              &lt;div class="dropdown-menu cursor-auto" aria-labelledby="dropdownMenu2"&gt;
                  &lt;div class="col-md-12 col-lg-12 col-sm-12 padding-0"&gt;
                      &lt;ul class="menu"&gt;
                          &lt;li role="presentation" class="cursor addRow" ng-click="addRow(part,$event)"&gt;Add row&lt;/li&gt;
                          &lt;li class="divider"&gt;&lt;/li&gt;                                   
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div&gt;
                  &lt;input class="display-none" type="text" ng-model="pseudoStructuredetails.partNumber"/&gt; 
              &lt;/div&gt;  
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="masterRow" ng-repeat= "child parent.childList" bs-popover&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td class="dropdown action display-none arrow"&gt;&lt;img src="images/icon_down.png" id="dropdownMenu2" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"/&gt;
              &lt;div class="dropdown-menu cursor-auto" aria-labelledby="dropdownMenu2"&gt;
                  &lt;div class="col-md-12 col-lg-12 col-sm-12 padding-0"&gt;
                      &lt;ul class="menu"&gt;
                          &lt;li role="presentation" class="cursor addRow" ng-click="addRow(part,$event)"&gt;add row&lt;/li&gt;
  
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div&gt;                                                           
                  &lt;input class="display-none psedostrctInput" type="text" ng-model="child.Number"/&gt; 
                  &lt;input class="display-none psedostrctInput" type="text" ng-model="child.Application"/&gt; 
              &lt;/div&gt;  
          &lt;/td&gt;
  </code></pre>
  
  <p>My controller is as follows</p>
  
  <pre><code>$scope.addRow = function(parent,e) {
      childRow = {
          actionCode:'A',
          Number: '',
          Application: ''
      };
  
      var trLength =  $(e.currentTarget).parent().parent().parent().parent().parent().nextAll('.pNumRow:first').length;
  
      var newMastertr = $('&lt;tr class="masterRow"&gt;&lt;td&gt;&lt;input type="checkbox" class="check" ng-click="enableButton()"/&gt;&lt;/td&gt;&lt;td&gt;&lt;span&gt;&lt;/span&gt;&lt;/td&gt;&lt;td class="dropdown action arrow"&gt;&lt;img src="images/icon_down.png" id="dropdownMenu2" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"/&gt;&lt;div class="dropdown-menu cursor-auto" aria-labelledby="dropdownMenu2"&gt;&lt;div class="col-md-12 col-lg-12 col-sm-12 padding-left10"&gt;&lt;ul class="menu"&gt;&lt;li role="presentation" class="cursor addRow" ng-click="addRow($event)"&gt;Add Master Code&lt;/li&gt;&lt;li role="presentation" class="cursor delete" ng-click="deleteRow($event)"&gt;Delete Master Code&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;&lt;div&gt;&lt;span class="margin-left10 psedostrctSpan"&gt;&lt;/span&gt;&lt;input type="text" class="psedostrctInput" ng-model="masterNumberNewRow.masterNumber" /&gt;&lt;input type="text" class="psedostrctInput" ng-model="masterNumberNewRow.masterApplication" /&gt;&lt;/div&gt;&lt;/td&gt;&lt;td Colspan={{PseudoStructure.maxNumberOfSuffixes}} class="ordrCode"&gt;&lt;span&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;');
      if(trLength != 0){
          $(e.currentTarget).parent().parent().parent().parent().parent().nextAll('.pNumRow:first').before(newMastertr);
      }
      else if(trLength === 0){
          $(e.currentTarget).parent().parent().parent().parent().parent().after(newMastertr);
      }
      part.masterNumberList.push({actionCode:'A',masterNumber:'',masterApplication:''});
  
      $compile(newMastertr)($scope);
  };
  </code></pre>
  
  <p>i am able to push action code as A in new list but could not get number and application text box to bind for the new rows added.</p>
  
  <p>I am adding row by compiling html code of new tr in scope.</p>
  
  <p>Please help me to push new child objects to parent by add row function.</p>