Angular-ui-grid gridApi undefined when trying to save state

I am using Angular ui-grid and am getting an error trying to save the grid state. It seems that gridApi is undefined. I have demonstrated the Plunker bug . You can find the instruction in View2Controller.js under the vm.saveState function.

angular.module('app').controller('View2Controller').$inject = ['$scope', '$http', 'uigridconstants'];

      

        
        
        
      

    

and

angular.module('app').controller('View2Controller', function ($scope, $http, uiGridConstants) {
var vm = this;

vm.customers = [];
vm.selectedText = '';
vm.selectedItems = [];
vm.gridOptions = {
    onRegisterApi: function (gridApi) {
        $scope.gridApi = gridApi;
    },        
    data: 'vm.customers',
    columnDefs: [
      {
          field: 'status', name: '', width: 50, sort: {
              direction: uiGridConstants.DESC,
              priority: 0
          }
      },
      {
          field: 'member', name: 'M', width: 50, type: 'boolean',
          cellTemplate: '<input type="checkbox" ng-model="row.entity.lid" >'
      },
      {
          field: 'company', name: 'Company', width: 200, minWidth: 200, maxWidth: 600
      }
    ]
};
$http.get('customers.json')
.success(function (data) {
    vm.customers = data;
});

vm.saveState = function(){
  //debugger;
  var stateToSave = $scope.gridApi.saveState.save();
  console.log(stateToSave);
};
});

      

        
        
        
      

    

Thanks a lot for any help.