title: AngularJs Grid - Not working when place the code under a event
body: <p>Here is the code.</p>
  
  <p>Working version - Grid displays and page load.</p>
  
  <pre><code>&lt;html ng-app="myApp"&gt;
  &lt;head lang="en"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Getting Started With ngGrid Example&lt;/title&gt;
      &lt;link href="http://localhost:4090/Content/ng-grid.min.css" rel="stylesheet" type="text/css" /&gt;
      &lt;script src="http://localhost:4090/Scripts/jquery-1.9.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="http://localhost:4090/Scripts/angular.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="http://localhost:4090/Scripts/ng-grid-2.0.6.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script&gt;
          // 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' };
          });
  
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-controller="MyCtrl"&gt;
      &lt;div class="gridStyle" ng-grid="gridOptions"&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Non working version. Moved the grid code under a button click.</p>
  
  <pre><code>&lt;html ng-app="myApp"&gt;
  &lt;head lang="en"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Getting Started With ngGrid Example&lt;/title&gt;
      &lt;link href="http://localhost:4090/Content/ng-grid.min.css" rel="stylesheet" type="text/css" /&gt;
      &lt;script src="http://localhost:4090/Scripts/jquery-1.9.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="http://localhost:4090/Scripts/angular.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="http://localhost:4090/Scripts/ng-grid-2.0.6.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script&gt;
          // 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' };
              }
          });
  
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-controller="MyCtrl"&gt;
      &lt;button id="click" ng-click="LoadGrid()"&gt;
          Load Grid&lt;/button&gt;
      &lt;div class="gridStyle" ng-grid="gridOptions"&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Getting the error : - TypeError: Cannot set property 'gridDim' of undefined</p>