<!DOCTYPE html>
<html ng-app="myApp">
    <head lang="en">
        <meta charset="utf-8">
        <title>Custom Plunker</title>  
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
        <script src="http://cdn.jsdelivr.net/underscorejs/1.5.1/underscore-min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
        <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
        <script type="text/javascript" src="main.js"></script>
        <style type="text/css">
          body {
            margin: 15px;
          }
        .gridStyle {
          border: 1px solid rgb(212,212,212);
          height: 250px;
        }
        .spacer3 {
          height: 3px;
        }
        </style>
    </head>
    <body ng-controller="MyCtrl">
      <h3>Employees (nice editable list)</h3>
      <div ng-repeat="employee in employeeData">
        
        <div class="row">
          <div class="col-sm-6">
            <div class="input-group">
              <input type="text" class="form-control" id="employee-input-{{$index}}" ng-model="employee.name">
              <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="removeEmployee($index)">
                  <span class="glyphicon glyphicon-remove"></span>
                </button>
              </span>
              
            </div>
            <div class="spacer3">&nbsp</div>
          </div>
        </div>
      </div>
      <div>
        <button type="button" class="btn btn-default" ng-click="addEmployee()">
        <span class="glyphicon glyphicon-plus"></span> Add Employee</button>
      </div>
      
      <br />
    
      <h3>Employees (ng-grid view)</h3>
      <div class="gridStyle" ng-grid="employeeOptions"></div>
      
    </body>
</html>
// main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
  $scope.employeeData = [{name: 'Caleb'}, {name: 'Whitney'}, {name: 'Hastin'}, {name: 'Rafe'}];
                   
  $scope.addEmployee = function() {
    $scope.employeeData.push({name: ''});
    $scope.$apply(); // Force new row add before attempting to focus on it.
    var lastRowId = "#employee-input-" + ($scope.employeeData.length-1);
    $(lastRowId).focus();
  };
  
  $scope.removeEmployee = function(employeeIndex) {
    if(employeeIndex >= 0 && employeeIndex < $scope.employeeData.length) {
      $scope.employeeData.splice(employeeIndex, 1);
    }
  };

  $scope.employeeOptions = {
    data: 'employeeData',
    enableCellEdit: true,
    columnDefs: [{field: 'name', displayName: 'Name'}]
  };
});