AngularJS dynamic table editor

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.isEdit = false;

  $scope.table = buildTable();
  
  $scope.cancel = function () {
    $scope.table = buildTable();
    $scope.isEdit = false;
  };

  $scope.removeCol = function($index) {
    if ($index > -1 && $scope.table.columns.length > 1) {
      $scope.table.columns.splice($index, 1);
      for (var i = 0, len = $scope.table.rows.length; i < len; i++) {
        $scope.table.rows[i].cells.splice($index, 1);
      }
    }
  };

  $scope.removeRow = function($index) {
    if ($index > -1 && $scope.table.rows.length > 1) {
      $scope.table.rows.splice($index, 1);
    }
  };
  
  $scope.addCol = function (){
    var len = $scope.table.columns.length,
        rowLen = $scope.table.rows.length;
    $scope.table.columns.push({ value: 'Col ' + len });
    for (var i = 0; i < rowLen; i++){
      $scope.table.rows[i].cells.push({ value: 'Call ' + i + ',' + len });
    }
  };
  
  $scope.addRow = function (){
    var row = { cells: [] },
        rowLen = $scope.table.rows.length,
        colLen = $scope.table.columns.length;
        
    for (var i = 0; i < colLen; i ++) {
      row.cells.push({ value: 'Cell ' + rowLen + ',' + i });
    }
    $scope.table.rows.push(row);
  };

  function buildTable() {
    return {
      columns: [{
        value: 'Col 0'
      }, {
        value: 'Col 1'
      }, {
        value: 'Col 2'
      }],
      rows: [{
        cells: [{
          value: 'Cell 0,0'
        }, {
          value: 'Cell 0,1'
        }, {
          value: 'Cell 0,2'
        }]
      }, {
        cells: [{
          value: 'Cell 1,0'
        }, {
          value: 'Cell 1,1'
        }, {
          value: 'Cell 1,2'
        }]
      }, {
        cells: [{
          value: 'Cell 2,0'
        }, {
          value: 'Cell 2,1'
        }, {
          value: 'Cell 2,2'
        }]
      }]
    };
  }
});

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

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link data-require="bootstrap-css" data-semver="3.0.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.5/angular.js" data-semver="1.2.5"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
  <form>
    <div ng-include src="isEdit ? 'tableEdit.html' : 'tableView.html'"></div>
    <button type="button" class="btn" ng-class="{true:'btn-primary',false:'btn-default'}[isEdit]" ng-click="isEdit = !isEdit">{{ isEdit ? 'Save' : 'Edit' }}</button>
    <button type="button" class="btn btn-danger" ng-show="isEdit" ng-click="cancel()">Cancel</button>
    </form>
  </body>

</html>

/* Put your css in here */

body {
  margin: 15px;
  margin-top: 70px;
}
button.close {
  position: relative;
  left: -20px;
  top: 3px;
  color: red;
}
.close:hover, .close:focus {
  color: red;
}
.close {
  float: none;
}
.table-responsive {
  table-layout: fixed;
  overflow: auto;
  max-height: 200px;
}
.nowrap {
  white-space: nowrap;
}

<div class="table-responsive"><table class="table table-condensed table-striped">
  <thead>
    <tr>
      <th ng-repeat="col in table.columns">{{ col.value }}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="r in table.rows">
      <td ng-repeat="cell in r.cells">{{ cell.value }}</td>
    </tr>
  </tbody>
</table></div>

<div class="table-responsive"><table class="table table-condensed table-striped">
  <thead>
    <tr>
      <th><span class="nowrap">
        <button type="button" class="btn btn-xs btn-success" ng-click="addCol()">add col</button>
        <button type="button" class="btn btn-xs btn-success" ng-click="addRow()">add row</button>
      </span></th>
      <th ng-repeat="col in table.columns">
        <span class="nowrap"><input type="text" ng-model="col.value" />
        <button type="button" class="close" ng-click="removeCol($index)">&times;</button></span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="r in table.rows">
      <td>
        <button type="button" class="btn btn-xs btn-danger" ng-click="removeRow($index)">remove row</button>
      </td>
      <td ng-repeat="cell in r.cells">
        <input type="text" ng-model="cell.value" />
      </td>
    </tr>
  </tbody>
</table></div>