title: Get Value of dynamically created table row value using angularjs
body: <p>I am a newbie in angularjs. I have a table and need to add some row dynamically. Everything working fine with a little of JQuery as well. But when I try to get value of dynamically created table row it's not working. My code is here. Please help.</p>
  
  <pre><code>&lt;div ng-app="Myapp"&gt;
      &lt;script src="//code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-messages.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          var Myapp = angular.module('Myapp', ["ngRoute"]);
      &lt;/script&gt;
  
      &lt;div ng-controller="orderFormController"&gt;
          &lt;table  id="item_table"&gt;
              &lt;thead&gt;
                  &lt;tr class="headings"&gt;
                      &lt;th class="column-title"&gt;Item &lt;/th&gt;            
                      &lt;th class="column-title"&gt;Rate&lt;/th&gt;                          
  
                      &lt;/th&gt;
  
                  &lt;/tr&gt;
              &lt;/thead&gt;
  
              &lt;tbody&gt;
                  &lt;tr&gt;
                      &lt;td&gt;         
                          &lt;input type="text" name="item"  ng-model='item[0]'&gt;
                      &lt;/td&gt;
  
                      &lt;td class=" "&gt;&lt;input type="text" name="rate"  ng-model='rate[0]'&gt; &lt;/td&gt;
                      &lt;td class=" "&gt;&lt;a onclick="addrow()"&gt;add(+)&lt;/a&gt; &lt;/td&gt;
                  &lt;/tr&gt;
  
              &lt;/tbody&gt;
  
          &lt;/table&gt;
          &lt;button type="button"  ng-click='saveorder()' &gt;SAVE ORDER&lt;/button&gt;
      &lt;/div&gt;    
      &lt;script&gt;
          Myapp.controller('orderFormController', ['$scope', '$http', function ($scope, $http) {
                  var data = {};
                  data['item'] = [];
                  $scope.item = '';
                  $scope.rate = '';
                  $scope.saveorder = function () {
                      var row_count = $('#item_table tr').length;
                      for (i = 1; i &lt;= row_count; i++) {
                          data['item'][i] = {'item': $scope.item[i], 'rate': $scope.rate[i]}
  
                      }
                      alert($scope.item[0]);
                      alert($scope.item[1]);
                  }
  
              }]);
          function addrow() {
              var row = $('#item_table tr').length + 1;
              var row_string = '&lt;tr&gt;&lt;td&gt;&lt;input type="text" name="item"  ng-model="item[' + row + ']"&gt;&lt;/td&gt;&lt;td class=" "&gt;&lt;input type="text" name="rate"  ng-model="rate['+ row +']"&gt; &lt;/td&gt;&lt;td class=" "&gt;&lt;a onclick="addrow()"&gt;add(+)&lt;/a&gt; &lt;/td&gt;&lt;/tr&gt;';
              $('#item_table tbody').append(row_string);
          }
      &lt;/script&gt;                 
  </code></pre>