ng-handsontable valdiateCells problem

validateCells and $scope value not syncron

HTML

<div ng-controller="MainCtrl as ctrl">
    <hot-table hot-id="myTable" stretch-h="ctrl.stretchH" row-headers="true" 
    col-headers="true" datarows="ctrl.data"
               settings="ctrl.settings">
        <hot-column data="id" type="'numeric'"></hot-column>
        <hot-column data="name" type="grayedOut" read-only></hot-column>
    </hot-table>{{valid}}
</div>

CSS

</style><!-- Ugly Hack due to jsFiddle issue -->

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://rawgit.com/handsontable/handsontable/master/dist/handsontable.full.js"></script>
<script src="https://rawgit.com/handsontable/ngHandsontable/master/dist/ngHandsontable.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<link type="text/css" rel="stylesheet" href="https://rawgit.com/handsontable/handsontable/master/dist/handsontable.full.css">

JavaScript

(function () {
    function MainCtrl($scope, $compile, hotRegisterer) {
        var self = this;
        $scope.valid = false;
        
        self.settings = {
          afterInit: afterInit,
          afterChange: afterChange
        };
        
      	self.data = [
        	{id: 100, name: 'Joe'},
        	{id: 200, name: 'Tom'},
          id: 100, name: 'Joe'},
        	{id: 200, name: 'Tom'},
          id: 100, name: 'Joe'},
        	{id: 200, name: 'Tom'},
          id: 100, name: 'Joe'},
        	{id: 200, name: 'Tom'},
          id: 100, name: 'Joe'},
        	{id: 200, name: 'Tom'},
          id: 100, name: 'Joe'},
        	{id: 200, name: 'Tom'},
          id: 100, name: 'Joe'},
        	{id: 200, name: 'Tom'},
          id: 100, name: 'Joe'},
        	{id: 200, name: 'Tom'},                  			{id: 200, name: 'Tom'},
        	{id: 200, name: 'Tom'},
        	{id: 200, name: 'Tom'},
        	{id: 200, name: 'Tom'},
        	{id: 200, name: 'Tom'},
        	{id: 200, name: 'Tom'},
        	{id: 200, name: 'Tom'}

        ];
        
        function afterInit() {
        	self.hot = this;
        }
        
        function afterChange(){
          if(angular.isObject(self.hot)){
          		self.hot.validateCells(function(r){
                  $scope.valid = r;
              });
          }
        }
    }
    
    angular.module('app', ['ngHandsontable']).controller("MainCtrl", MainCtrl);
    angular.bootstrap(document, ['app']);
})();