Kendo grid datasource change event not raised when created grid using custom angular directive

See more:

Javascript

jQuery

AngularJs

Kendo

, +

Hi,
I created kendo grid with custom angular directive but it's datasource change not getting raised, however if i use the code without custom directive it works fine.
Can someone please help?

Also here is a DOJO link where this issue can be reproducible:
Kendo UI® Dojo by Progress[^]

What I have tried:

<div ng-app="kendoApp">
    <grid grid-name="stockGrid" grid-options="stockGridOptions"></grid>
</div>

<script>
    var app = angular.module('kendoApp', ["kendo.directives"]);

app.directive('grid', function () {
    return {
        restrict: "EA",
        scope: {
            gridName: "@",
            gridOptions: "@"
        },
        template: '<h1>kendoDirective</h1><br/><div kendo-grid={{gridName}} options={{gridOptions}}></div>',
        controller: function ($scope, $element, $attrs) {
            debugger;

            $scope.gridOptions = {
                toolbar: ["create", "save", "cancel"],
                dataSource: {
                    transport: {
                        create: {
                            url: "/Stock/InsertStockDetails",
                            type: "post",
                            complete: function (e) {
                                $scope.stockGrid.dataSource.data([]);
                                PopupSuccess(e.responseJSON.Message, 4000);
                            }
                        }
                    },
                    batch: true,
                    schema: {
                        model: {
                            id: "Id",
                            fields: {
                                Id: { type: "number", editable: false },
                                Product_Name: { type: "string" },                            
                                Strip_No: { type: "number", validation: { required: true } },
                                Strip_Unit: { type: "number", validation: { required: true } },
                                Total: { type: "number" },
                            }
                        }
                    },
                    change: function (e) {
                        debugger;                        
                    }
                },
                autoBind: false,
                columns: [{
                    field: "Product_Name",
                    title: "Product Name"
                },  {
                    field: "Strip_No",
                    title: "Number of Strip"
                }, {
                    field: "Strip_Unit",
                    title: "Units in Strip"
                }, {
                    field: "Total",
                    title: "Total"
                }],
                editable: true
            };

        },
        link: function ($scope, $element, $attrs) {
            debugger;
        }
    };
});
  </script>