title: How to add the rows dynamically with angularjs?
body: <p>I used the code to add the row and 2 columns by clicking the add rows.
  "My need is",
  First fill the values in the input field,
  after that click the Add item button, the values must be shown in table structure. 
  Am the beginneer. Cant able to use the for loop.
  Can anyone please solve this issue.</p>
  
  <p>try the code : <a href="https://jsfiddle.net/idris9791_/a7L832LL/" rel="nofollow">https://jsfiddle.net/idris9791_/a7L832LL/</a></p>
  
  <pre><code>  &lt;html &gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"&gt;
  
      &lt;title&gt;Add Rows&lt;/title&gt;
  
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"&gt;&lt;/script&gt;
  
    &lt;body ng-controller="MainController" ng-app="MyApp"&gt;
  
      &lt;a href="#" class="button" ng-click="addRow()"&gt;Add Row&lt;/a&gt;
      &lt;form&gt;
      First Name : &lt;input name="myInput" ng-model="user.firstName" required&gt;
      First Name : &lt;input name="myInput" ng-model="user.lastName" required&gt;
      &lt;/form&gt;
  
  
  &lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Some Header&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
     &lt;tr ng-repeat="rowContent in rows"&gt;
    &lt;td&gt;{{rowContent.firstName}}&lt;/td&gt;
    &lt;td&gt;{{rowContent.lastName}}&lt;/td&gt;
  &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;    
  &lt;script&gt;
  angular.module('MyApp', [])
  .controller('MainController', [ '$scope', function($scope) {
  
    $scope.rows = [];
  
    $scope.counter = 0;
  
    $scope.addRow = function() {
  
      $scope.row.push({
      firstName: $scope.firstName,
      lastName: $scope.lastName
  });
  
      $scope.counter++;
  
    }
  }]);
  &lt;/script&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>