title: Angular Submitting table with data
body: <p>I have a requirement where i have a table with (8*6)48 cells with all have input tag inside <code>&lt;td&gt;</code>, on submitting that table my js file has to take all the data and POST it to my backend controller. My issue is since all the cells are input text type, angular is not able to take the values inside of it.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var isrcorderapp = angular.module('plunker', []);
  
  /*
  isrcorderapp.directive("test1", function(){
    return {
      restrict:'A',
      link: function($scope, $elem) {
        var arr = ($($elem[0]).find('tbody tr'));
        var coll = [];
        for(var i=0; i &lt; arr.length; i++){
          var tr = arr[i];
          var tdColl = $(tr).find('td');
          var obj = [];
          for(var y = 0; y &lt; tdColl.length; y++ ){
            
            obj.push(tdColl[y].innerHTML);
          }
          coll.push(obj)
        }
       console.log(coll);
      }
      }
    });
  */
  
  isrcorderapp.controller("isrcorders", function($scope,$http,$compile) {
  
      $scope.myVal='submit';
      $scope.coll={};
      $scope.myFn=function(){
       
       var total=angular.element( document.querySelector( '.table' ) ).find('tbody tr');
            var coll = [];
          console.log('totla'+total);
           for(var i=0; i &lt; total.length; i++){
            console.log('totla'+total);
             var tr = total[i];
               var tdColl = $(tr).find('td');
               console.log(tdColl);
                  var obj = [];
                  for(var y = 0; y &lt; tdColl.length; y++ ){
  
                    obj.push(tdColl[y].innerHTML);
                  }
                  coll.push(obj);
               console.log(coll);
           }
      }
      
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="plunker"&gt;
  
    &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;AngularJS Plunker&lt;/title&gt;
      &lt;script&gt;document.write('&lt;base href="' + document.location + '" /&gt;');&lt;/script&gt;
      &lt;script data-require="jquery@2.0.3" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js" &gt;&lt;/script&gt;
      &lt;script src="app.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
  
    &lt;body ng-controller="isrcorders"&gt;
        &lt;form ng-submit="myFn()"&gt;
      &lt;table test1="" id="isrctable" class="table"  &gt;
       &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;Age&lt;/th&gt;
                  &lt;th&gt;Position&lt;/th&gt;
                  &lt;th&gt;Office&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tfoot&gt;
              &lt;tr&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;Age&lt;/th&gt;
                  &lt;th&gt;Position&lt;/th&gt;
                  &lt;th&gt;Office&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/tfoot&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;Tiger Nixon&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" id="row-1-age" name="row-1-age" value="61"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" id="row-1-position" name="row-1-position" value="System Architect"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;select size="1" id="row-1-office" name="row-1-office"&gt;
                      &lt;option value="Edinburgh" selected="selected"&gt;
                          Edinburgh
                      &lt;/option&gt;
                      &lt;option value="London"&gt;
                          London
                      &lt;/option&gt;
                      &lt;option value="New York"&gt;
                          New York
                      &lt;/option&gt;
                      &lt;option value="San Francisco"&gt;
                          San Francisco
                      &lt;/option&gt;
                      &lt;option value="Tokyo"&gt;
                          Tokyo
                      &lt;/option&gt;
                  &lt;/select&gt;&lt;/td&gt;
              &lt;/tr&gt;
             &lt;/tbody&gt;
         
          
      &lt;/table&gt;
             &lt;input type="submit" id="submit" value={{myVal}} /&gt;
            &lt;/form&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>when I tried to query with innerHTML property I am getting complete HTML tag like</p>
  
  <pre><code>&lt;input type="text" id="row-32-position" name="row-32-position" value="Developer"&gt;
  </code></pre>
  
  <p>I need to query the value .. need your help on this</p>