Kendo UI Grid in an AngularJS Directive

How to create a Kendo-grid with reusable options using AngularJS?

In addition to the default settings, the grid must dynamically include a checkbox column with the option to select all rows. Methods to handle selections should be part of the directive, and somehow I should be able to get access to the selected ids in the controller view.

Another important behavior is to keep a reference to the grid in the controller :

// no controller: $scope.grid
<div kendo-grid="grid" k-options="gridOptions"></div>

Below is an initial path that I envisioned, but it is not 100% functional since AngularJS does not compile the information in the checkbox column, so it does not call the controller methods of the directive. At the same time I'm not sure where to force the $ compile in this code.

myApp.directive('p3visaoGrid', ['$compile', function ($compile) {
var directive = {
    restrict: 'A',
    replace: true,
    template: '<div></div>',
    scope: {
        gridConfiguration: '='
    },
    controller: function ($scope) {
        $scope.gridIds = [];
        $scope.gridIdsSelected = [];

        var updateSelected = function (action, id) {
            if (action === 'add' && $scope.gridIdsSelected.indexOf(id) === -1) {
                $scope.gridIdsSelected.push(id);
            }
            if (action === 'remove' && $scope.gridIdsSelected.indexOf(id) !== -1) {
                $scope.gridIdsSelected.splice($scope.gridIdsSelected.indexOf(id), 1);
            }
        };

        $scope.updateSelection = function ($event, id) {
            var checkbox = $event.target;
            var action = (checkbox.checked ? 'add' : 'remove');
            updateSelected(action, id);
        };

        $scope.isSelected = function (id) {
            return $scope.gridIdsSelected.indexOf(id) >= 0;
        };

        $scope.selectAll = function ($event) {
            var checkbox = $event.target;
            var action = (checkbox.checked ? 'add' : 'remove');
            for (var i = 0; i < $scope.gridIds.length; i++) {
                var id = $scope.gridIds[i];
                updateSelected(action, id);
            }
        };
    },
    link: function ($scope, $element, $attrs) {
        var baseColumns = [
            {
                headerTemplate: '<input type="checkbox" id="selectAll" ng-click="selectAll($event)" ng-checked="isSelectedAll()">',
                template: '<input type="checkbox" name="selected" ng-checked="isSelected(#=Id#)" ng-click="updateSelection($event, #=Id#)">',
                width: 28
            }
        ];

        for (var i = 0; i < $scope.gridConfiguration.columns.length; i++) {
            var column = $scope.gridConfiguration.columns[i];
            baseColumns.push(column);
        }

        var gridOptions = { ... };

        var grid = $element.kendoGrid(gridOptions).data("kendoGrid");;
        $scope.$parent[$attrs[directive.name]] = grid;
    }
};

return directive;
}]);