Ui-grid data load with column refresh

var app = angular.module('app', ['ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$scope', '$timeout', function ($scope, $timeout) {

//Raw Data 
$scope.dataSets = {
   "little": [
   {
      "firstName": "Cox",
      "lastName": "Carney",
  },
  {
      "firstName": "Lorraine",
      "lastName": "Wise",
  },
  {
      "firstName": "Nancy",
      "lastName": "Waters",
  }],
  "more": [
   {
      "firstName": "Cox",
      "lastName": "Carney",
      "company": "Enormo",
  },
  {
      "firstName": "Lorraine",
      "lastName": "Wise",
      "company": "Comveyer",
  },
  {
      "firstName": "Nancy",
      "lastName": "Waters",
      "company": "Fuelton",
  }],
  "all": [
   {
      "firstName": "Cox",
      "lastName": "Carney",
      "company": "Enormo",
      "employed": true
  },
  {
      "firstName": "Lorraine",
      "lastName": "Wise",
      "company": "Comveyer",
      "employed": false
  },
  {
      "firstName": "Nancy",
      "lastName": "Waters",
      "company": "Fuelton",
      "employed": false
  }]
}  
$scope.tableOptions = { "data": [], "columnDefs":[]};
$scope.tableOptions.onRegisterApi = function ( gridApi ) {
     console.log("register gridApi")
     $scope.gridApi = gridApi;
};

//emulate api call
$scope.requestData = function(type) { 
  $scope.tableOptions.data = $scope.dataSets[type]
  
 if ($scope.dataSets[type].length > 0) {
    var keys = Object.keys($scope.dataSets[type][0]); 
    
    //reset columns
    $scope.tableOptions.columnDefs = [];
    for(var i=0; i < keys.length; i++) { 
      console.log($scope.tableOptions.columnDefs)
      $scope.tableOptions.columnDefs.push({"field":keys[i]}) 
    }
  }
  
}


  
}]);

.grid {
  width: 500px;
  height: 250px;
}

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>
  
  
  <div ng-controller="MainCtrl">  
    <h2>Intended use (press the buttons)</h2>
    <button type="button" ng-click="requestData('little')">Little</button>
    <button type="button" ng-click="requestData('more')">more</button>
    <button type="button" ng-click="requestData('all')">all</button>
    
    <div id="grid1" ui-grid="tableOptions" class="grid"></div>
      data: {{tableOptions.data}} 
      <br><br><br>
      columndefs:
      {{tableOptions.columnDefs}} 
    </div>
  </div>

  <script src="app.js"></script>
  </body>
</html>