A demo of using ng-repeat in HTML table

HTML / AngularJS Code

Output

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">

<body ng-app="ngrepeatApp" ng-controller="ngrepeatCtrl">
<h4>Products List (demo of ng-repeat)</h4>
     <table class="table table-bordered table-striped">
          <tr>
              <th>ID</th>
              <th>Name</th>
              <th>Quality</th>
              <th>Quantity</th>
          </tr>
          <tr ng-repeat="prod in products">
          <td>{{prod.id}<!--Remove this comment-->}</td>
          <td>{{prod.product}<!--Remove this comment-->}</td>
          <td>{{prod.quality}<!--Remove this comment-->}</td>
          <td>{{prod.quantity}<!--Remove this comment-->}</td>
    </tr>
  </table>
<script>
var app = angular.module("ngrepeatApp", []);
app.controller("ngrepeatCtrl", function($scope) {
  $scope.products = [{ id: 1, product: 'Sugar', quality: 'Good', quantity: '200 packs' }, { id: 2, product: 'Wheat', quality: 'Super', quantity: '100 bags' }, { id: 3, product: 'Rice', quality: 'Fine', quantity: '50 packs' }];

  
});
</script>

</body>
</html>

Products List (demo of ng-repeat)

ID	Name	Quality	Quantity
{{prod.id}}	{{prod.product}}	{{prod.quality}}	{{prod.quantity}}