AngularJs Grid – Not working when place the code under a event-Collection of common programming errors

Here is the code.

Working version – Grid displays and page load.

    
    Getting Started With ngGrid Example
    
    
    
    
    
        // main.js
        var app = angular.module('myApp', ['ngGrid']);
        app.controller('MyCtrl', function ($scope) {
            $scope.myData = [{ name: "Moroni", age: 50 },
                     { name: "Tiancum", age: 43 },
                     { name: "Jacob", age: 27 },
                     { name: "Nephi", age: 29 },
                     { name: "Enos", age: 34}];
            $scope.gridOptions = { data: 'myData' };
        });

    


    
    

Non working version. Moved the grid code under a button click.

    
    Getting Started With ngGrid Example
    
    
    
    
    
        // main.js
        var app = angular.module('myApp', ['ngGrid']);
        app.controller('MyCtrl', function ($scope) {
            $scope.LoadGrid = function () {
                alert('');
                $scope.myData = [{ name: "Moroni", age: 50 },
                     { name: "Tiancum", age: 43 },
                     { name: "Jacob", age: 27 },
                     { name: "Nephi", age: 29 },
                     { name: "Enos", age: 34}];
                $scope.gridOptions = { data: 'myData' };
            }
        });

    


    
        Load Grid
    
    

Getting the error : – TypeError: Cannot set property ‘gridDim’ of undefined