Combining ng-grid and ui.bootstrap.modal

Question

I'm trying to put ng-grid on the modal window (ui.bootstrap.modal). When grid placed on the main page, everything is ok.

But when I place it into

<script type="text/ng-template"...></script>

I'm getting the following:

"TypeError: Cannot set property 'gridDim' of undefined".

Is there some workaround to place ng-grid on a modal window?

My plunk is here: http://plnkr.co/edit/ctLF6j3WeqSvT3vEM40f?p=preview

Answer 1

http://plnkr.co/edit/SkqwlmfSM6jpgS9rR5Ad

var ModalInstanceCtrl = function ($scope, $modalInstance, items) {

$scope.gridOptions = { 
    data: 'myData',
    columnDefs: [{field: 'name', displayName: 'Name'}, {field:'age', displayName:'Age'}, {field: 'remove', displayName:'', cellTemplate: removeTemplate}]
};
$scope.myData = [{name: "Moroni", age: 50},
                 {name: "Tiancum", age: 43},
                 {name: "Jacob", age: 27},
                 {name: "Nephi", age: 29},
                 {name: "Enos", age: 34}]; 
  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.ok = function () {
    $modalInstance.close($scope.selected.item);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
};

The modal has it's own scope not inheriting from the scope where you defined the gridOptions, this error occurs if it can't find the gridOptions to set the gridDim on it.