Unable to get kendo grid link in angular bootstrap modal window

Question

I am trying to get a link to a kendo grid placed in a template used by bootstrap modal. The same grid works when it is placed directly in the scope of the application controller, but throws an undefined error from the modal instance controller.

Can someone please tell me what I'm doing wrong.

var app = angular.module('plunker', ['ui.bootstrap', 'kendo.directives']);

app.controller('MainCtrl', function($scope, $modal) {
  $scope.name = 'World';

  $scope.mySource = new kendo.data.DataSource({
          data: [
            {ColumnOne:'One', ColumnTwo:'Two'},
            {ColumnOne:'Three', ColumnTwo:'Four'},
            {ColumnOne:'Five', ColumnTwo:'Six'}
            ]
  });

  $scope.myGridChange = function(){
     var selectedRows = $scope.myGrid.select();
     console.log($scope.myGrid.dataItem(selectedRows[0]));
  };

   $scope.items = ['item1', 'item2', 'item3'];

   $scope.open = function () {

    $modal.open({
      templateUrl: 'myGridTemplate.html', //'myTemplate.html',
      controller: ModalInstanceCtrl,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });
   };
});


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

  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.myTempSource = new kendo.data.DataSource({
          data: [
            {ColumnOne:'One', ColumnTwo:'Two'},
            {ColumnOne:'Three', ColumnTwo:'Four'},
            {ColumnOne:'Five', ColumnTwo:'Six'}
            ]
  });

   $scope.myTempGridChange = function(){
     var selectedRows = $scope.myTempGrid.select();
     console.log($scope.myTempGrid.dataItem(selectedRows[0]));
  };

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

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

I get Can't call the 'select' method from undefined to

var selectedRows = $scope.myTempGrid.select();

Here is the link to my plnkr

http://plnkr.co/edit/GUSX6JR9HRvtdSWclvPl?p=preview

Answer 1

. , , . , , .

, . , - , . , Kendo $scope.myTempGrid, , , .

, , , , . , - , .

: http://plnkr.co/edit/0VFJfp?p=preview

:

...
$scope.container = {};
...

HTML

...
<div kendo-grid="container.myTempGrid">
...

- "controller as": http://plnkr.co/edit/Pmjend?p=preview