Have an AngularJS Ui-grid Error

Question

I have a single page application with angular js, mongoose, express and so on. Tried to use angular ui grid and have an error:

"TypeError: Cannot read property 'data' of undefined at new (ui-grid.js:2967) at Object.e [as invoke] (angular.js:4203) at $get.w.instance (angular.js:8493) at angular.js:7739 at r (angular.js:331) at B (angular.js:7738) at $get.c (angular.js:8016) at g (angular.js:7117) at B (angular.js:7763) at g (angular.js:7117)"

this is part of my controller:

angular.module('flatCtrl', ['flatService', 'ui.grid'])
    .controller('FlatController', function(Flat, socketio){

        vm = this;

        Flat.allFlat()
            .success(function(data){
                vm.flats = data;
                console.log(vm.flats);
                vm.gridOptions.data = data;

            })

and part of HTML:

<div class="col-md-12" ng-controller="FlatController as flat">
        <div ui-grid="gridOptions"></div>

if i try to use vm.gridOptions.data = data after success nothing changes.

in console.log(vm.flats) have all my objects:

[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]0: Object1: Object2: Object3: Object4: Object5: Object6: Object7: Object8: Object9: Object10: Object11: Object

so, in data i have data

Answer 1

Change

vm.gridOptions.data = data;

To

vm.gridOptions = {};
vm.gridOptions.data = data;

Or

vm.gridOptions = { data: data }

And

<div class="col-md-12" ng-controller="FlatController as flat">
    <div ui-grid="flat.gridOptions"></div>

You were trying to read a data property of vm.gridOptions which is undefined so first you need define vm.gridOptions and set that object's data property.