Kendo UI Grid in an Angularjs Directive

Question

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

In addition to the default settings, the grid should dynamically include a column checkbox with the option to select all lines. The methods to handle selections should be part of the directive and somehow I should be able to access the selected ids on controller of view.

Another important behavior is to maintain in the scope of controller a reference to the grid:

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

Below an initial path that I imagined, but is not 100% functional because Angularjs does not compile column information checkbox, therefore does not call the methods of controller directive. At the same time I don’t know exactly where to force $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;
}]);