Angular Grid in Bootstrap Modal

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="utf-8">
        <title>Angular Grid in Bootstrap Modal</title>  
        <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
        <script src="http://cdn.jsdelivr.net/angularjs/1.0.2/angular-resource.js"></script>
        <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </head>
    <body ng-app="myApp">
      
      <a href="#myModal" class="btn btn-primary" data-toggle="modal">Open Modal</a>
      
      <div id="myModal" class="modal hide fade" role="dialog" ng-controller="MyCtrl">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
            <h3>Modal</h3>
        </div>
        <div class="modal-body">
            <!--<button class="btn" ng-click="load()">Load</button>-->
            <div>
                <div class="gridStyle" ng-grid="gridOptions"></di>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        </div>
      </div>

    </body>
</html>

/*style.css*/

.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 400px; 
    height: 300px;
}

// main.js
var app = angular.module('myApp', ['myServices', 'ngGrid']);
app.controller('MyCtrl', function($scope, PeopleService) {
    $scope.myData = [];
    
    $scope.load = function(){
      PeopleService.query({}, function(ret){
        window.setTimeout(function(){
          $scope.myData = ret;
          
          $scope.$apply();
        });
      });
    };
    
    $scope.gridOptions = {
      data: 'myData'
    };
    
    $scope.load();
});

angular.module('myServices', ['ngResource'])
  .factory('PeopleService', function ($resource) {
      return $resource('data.json');
  });

[
  { "name":  "Moroni",  "age": 50 },
  { "name":  "Tiancum", "age": 43 },
  { "name":  "Jacob",   "age": 27 },
  { "name":  "Nephi",   "age": 29 },
  { "name":  "Enos",    "age": 34 }
]