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

Question

I'm using Angular ui-grid and get an error trying to save the grid state. The gridApi seems to be undefined. I've created a Plunker to demonstrate the error. You can find the statement 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);
};
});

Many thanks for any assistance.

Answer 1

There are couple of problems with the code. One you have two instances of the controller View2Controller.

Second you need to use the 'ui.grid.saveState' module in your app to get the save state functionality.

<div>
    <div ui-grid="vm.gridOptions" ui-grid-save-state class="myGrid"></div>
</div>


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

Look at the plnkr here

http://plnkr.co/edit/OQp4cmZiu87cjeKQwFi6?p=preview