Angular JS - multiple ng-grid in one controller : Master /detail

Question

The HTML

<body ng-controller="MyCtrl">
        <div class="gridStyle" ng-grid="fooGridOptions"></div>
        <div class="gridStyle" ng-grid="barGridOptions"></div>
</body>

the JS:

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
    $scope.foo = [{name: "Moroni", age: 50},
                     {name: "Tiancum", age: 43},
                     {name: "Jacob", age: 27},
                     {name: "Nephi", age: 29},
                     {name: "Enos", age: 34}];
    $scope.bar = [{name: "Moroni", age: 50},
                     {name: "Foo", age: 43},
                     {name: "Bar", age: 27},
                     {name: "FooBar", age: 29},
                     {name: "JohnJohn", age: 34}];
    $scope.fooGridOptions = { data: 'foo' };
    $scope.barGridOptions = { data: 'bar' };
});

ng-grid looks in whichever object is passed with the directive(ng-grid="myOptionsObject"). In this case we only have the 'data' property set upon the object but other options are available.