title: Dynamically Creating repeated textbox and textbox groups fails in AngularJS
body: <p>MY code is like this</p>
  
  <pre><code>&lt;body&gt;
  &lt;div ng-app=''&gt;
      &lt;div ng-controller="questionCtrl"&gt;
          &lt;div&gt;
              &lt;ul /&gt;
              &lt;li ng-repeat="prdElement in palletElement"&gt;
                  &lt;input type="text" ng-model="prdElement.name" placeholder="Name" required /&gt;
                  &lt;ul&gt;
                      &lt;li ng-repeat="elemnt in prdElement.children"&gt;
  
                          &lt;div&gt;
                              &lt;span&gt;
                                  &lt;input type="text" ng-model="elemnt.name" placeholder="Name" required /&gt;
                              &lt;/span&gt;
                              &lt;span ng-hide="elemnt.length == 1"&gt;
                                  &lt;a href ng-click="prdElement.splice($index, 1)"&gt;remove&lt;/a&gt;
                              &lt;/span&gt;
                          &lt;/div&gt;
                          &lt;hr /&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href ng-click="newPrdItem($event)"&gt;New Item&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
  
  
          &lt;/div&gt;
          &lt;div&gt;
              &lt;button ng-click="showitems($event)"&gt;Submit&lt;/button&gt;
          &lt;/div&gt;
          &lt;div id="displayitems" style="visibility:hidden;"&gt;
              {{prdElement}}
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>    function questionCtrl($scope){
  var counter=0;
  
  $scope.palletElement = [{
      name: 'Pallet 1',
      children: [{
          name: '11',
      }, {
          name: '12',
      }]
  }, {
      name: 'Pallet 2',
      children: [{
          name: '21'
      }, {
          name: '22'
      }]
  }]
  
  
  
  $scope.newPrdItem = function ($event) {
      counter++;
      $scope.prdElement.children.push({ id: counter, name: ''});
      $event.preventDefault();
  }
  
  $scope.showitems = function($event){
      $('#displayitems').css('visibility','none');
  }
  </code></pre>
  
  <p>}</p>
  
  <p><strong><a href="http://jsfiddle.net/JDS2U/70/" rel="nofollow">JSFiddle</a></strong>
  all looks okay to me but adding and removing elements functionality is not working</p>