<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="tableCtrl as vm">
   <div class="container">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>Name</th>
            <th>City</th>
            <th>State</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="record in vm.records">
            <td>
              <input type="text" name="name"
                class="form-control"
                ng-model="record.name" />
            </td>
            <td><input type="text" name="city"
                class="form-control"
                ng-model="record.city" /></td>
            <td>
              <input type="text" name="state"
                class="form-control"
                ng-model="record.state" />
            </td>
            <td class="text-center">
              <i class="fa fa-times-circle fa-lg text-danger" 
                 ng-if="!$first"
                 ng-click="vm.remove($index)"
                 title="Delete" aria-hidden="true"></i>
              
              <i class="fa fa-plus-circle fa-lg text-success"
                 ng-if="$last"
                 ng-click="vm.add()"
                 title="Add" aria-hidden="true"></i>
            </td>
          </tr>
        </tbody>
      </table>
   </div>
  </body>

</html>
(function(){
  
  var app = angular.module("myApp", []);
  app.controller("tableCtrl", function(){
    var vm = this;
    
    vm.records = [
      {name: 'John Smith', city:'Manhattan', state: 'NY'},
      {name: 'Maria Rodriguez', city:'Brooklyn', state: 'NY'},
      {name: 'Michael Garcia', city:'Queens', state: 'NY'}
      ]
    
    vm.add = function(){
      vm.records.push({name: '', city:'', state: ''});
    }
     vm.remove = function(index){
      vm.records.splice(index, 1);
    }
  })
  
})();
/* Styles go here */