AngularJS: Create dynamic tables with CRUD operations

Below is a short example how you create multiple dynamic table using AngularJS and perform CRUD operations.

<div ng-app="demo" ng-controller="DemoCtrl">
 <button style="margin-bottom:20px;" ng-click="addNewPath()">Add New Table</button>
 <table ng-repeat="reportObj in recordReport" border="1" style="margin-bottom:50px;width:50%">
  <thead>
   <tr>
    <th>Subject</th>
    <th>Marks</th>
    <th>Action</th> 
   </tr>
  </thead>
  <tbody>
   <tr ng-repeat="option in reportObj.report">
    <td>
     <select ng-model="option.subject" ng-options="item for item in subjectList"></select>
    </td>
    <td>
     <input type="text" ng-model="option.marks" name="value" placeholder="Enter Marks">
    </td>
    <td>
     <button ng-click="($index+1)!=reportObj.report.length?removeOption($index, reportObj.report):addNewRow(reportObj)">
      {{($index+1)!=reportObj.report.length?'Remove':'Add'}}
     </button>
    </td>
   </tr>
  </tbody>
 </table>
</div>

angular.module('demo', []).controller('DemoCtrl', function($scope) {
 $scope.subjectList = ["Math","English","Computer"];
 $scope.report = [{"subject":"Math","marks":""}];
 $scope.recordReport = [{'report':angular.copy($scope.report)}];
 
 $scope.addNewRow = function(obj) {   
  obj.report.push({"subject":"Math","marks":""});
 };

 $scope.addNewPath= function() {
  $scope.recordReport.push({'report':angular.copy($scope.report)});    
 };

 $scope.removeOption = function(id, obj) {
  obj.splice(id, 1);
 };
});

Good Day :)