Kendo Angular Locked Grid in Window

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

app.controller('MainCtrl', function() {
  this.appName = "Locked Grid in Kendo window render problem";
  this.logMsg = [];
  var that = this;

  this.clearLogs = function() {
    this.logMsg = [];
  }

  this.windowsOption = {
    modal: true,
    draggable: false,
    title: "Grid Window",
    actions: ['Maximize', 'Close'],
    visible: false,
    resizable: false
  }

this.openWindow = function() {
  that.window.open();
  kendo.resize(that.window.element);
}


  this.logMsg.push("compiled.");
});

app.directive("clGrid", function() {
  return {
    controllerAs: "gridCtrl",
    templateUrl: "clGrid.html",
    controller: function() {

      this.gridOptions = {
        selectable: true,
        resizable: true,
        pageable: true,
        editable: false,
        height: 450,
        dataSource: {
          type: "odata",
          transport: {
            read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
          },
          pageSize: 25,
          serverPaging: true,
          serverSorting: true
        },
        columns: [{
          field: "FirstName",
          title: "First Name",
          width: "120px",
          locked: true
        }, {
          field: "LastName",
          title: "Last Name",
          width: "120px"
        }, {
          field: "Country",
          width: "120px"
        }, {
          field: "City",
          width: "120px"
        }, {
          field: "Title",
          width: "250px"

        }]
      }

    }
  }
});

app.directive("clChart", function() {
  return {
    controllerAs: "chartCtrl",
    templateUrl: "clChart.html",
    controller: function() {
      var blogComments = [{
        "blog": "My blog",
        "day": "1",
        "value": 3,
        "userColor": "#ffd600"
      }, {
        "blog": "My blog",
        "day": "2",
        "value": 7,
        "userColor": "#ffd600"
      }, {
        "blog": "My blog",
        "day": "30",
        "value": 6,
        "userColor": "#ffd600"
      }];
      this.chartOptions = {
        dataSource: {
          data: blogComments
        },
        title: {
          align: "left",
          text: "Comments per day"
        },
        seriesDefaults: {
          type: "column",
          labels: {
            visible: true,
            background: "transparent"
          }
        },
        series: [{
          field: "value",
          colorField: "userColor"
        }]
      }
    }
  }
});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css" />
  <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="//kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script>
  <script src="//kendo.cdn.telerik.com/2016.1.226/js/angular.min.js"></script>
  <script src="//kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl as ctrl">
  <h1>{{ctrl.appName}}</h1>
  <div class="container">
    <div kendo-window="ctrl.window" k-options="ctrl.windowsOption" style="display: none">
      <div class="container">
        <h1 class="dialog-title">Grid in Kendo Window</h1>
        <cl-chart></cl-chart>
        <cl-grid></cl-grid>
      </div>
    </div>
    <p>
      <button ng-click="ctrl.openWindow()">Open Window</button>
    </p>
  </div>

  <div class="container">
    <h1>Outside Kendo Window</h1>
    <cl-chart></cl-chart>
    <cl-grid></cl-grid>
  </div>

  <div class="container">
    <hr />
    <h3>Log Messages         <button type="button" ng-click="ctrl.clearLogs()">clear log</button>
      </h3>
    <ul class="console">
      <li ng-repeat="l in ctrl.logMsg track by $index">{{l}}</li>
    </ul>
  </div>
</body>

</html>

/* Put your css in here */

.console {
  font-family: "courier new";
  font-size: 10pt;
}

.container {
  margin-top: 25px;
  margin-bottom: 25px;
}

.dialog-title {
  width: 500px;
}

.grid {
  width: 100%;
}

<div kendo-grid="gridCtrl.grid" k-options="gridCtrl.gridOptions"></div>

<kendo-chart k-options="chartCtrl.chartOptions" style="width: 100%; height: 300px"></kendo-chart>