Kendo UI Grid reference undefined in AngularJS

I am trying to integrate Kendo UI into AngularJS. I've come across an issue which I can't seem to solve. I am fairly new to AngularJS and am trying to follow the guidelines as best as possible.

The issue at hand is that I am unable to obtain a reference to my Kendo UI grid. I've already gone through a couple of similar SO questions, but none seem to resolve the issue. The main difference in my code is that I'm using controllerAs instead of $scope.

Datagrid Controller:

'use strict';

angular
    .module('ayotaWebFeApp.datagrid')
    .controller('DataGridController', DataGridController);

DataGridController.$inject = ['$scope','$routeParams', 'datagriddataservice'];

function DataGridController($scope, $routeParams, dataservice) {
    console.info('DataGridController instantiated.');
    var vm = this;
    vm.grid = {};
    vm.dataTitle = $routeParams.datatype;

    activate();

    $scope.$on('kendoWidgetCreated', function(event, widget) {
        console.log('kendowidgetcreated event: ', event);
        console.log('kendowidgetcreated widget: ', widget);

        $scope.$apply();
    });

    function activate() {
        console.info('Activate was called.');
        return getDataFields().then(function() {
            console.info('Loaded data fields for data type :'+$routeParams.datatype);
        });
    }

    function initGridOptions(columnSpec) {
        var restURL = '/api/data';
        if($routeParams.ups) {
            restURL += '/UPS/' + $routeParams.ups;
        } else {
            restURL += '/adm';
        }
        restURL += '/' + $routeParams.historical;
        restURL += '/' + $routeParams.datatype;

        console.info('Data REST url : ', restURL);
        console.info('fields: ', columnSpec);
        vm.dataGridOptions = {
            name: 'grid',
            columns : columnSpec['columns'],
            dataSource: {
            type: 'json',
            transport: {
                read: 'http://localhost:57713'+restURL
            },
            schema: {
                model: {
                fields : columnSpec['fields']
                }
            }
            },
            sortable: true,
            filterable: true,
            scrollable: true,
            reorderable: true,
            resizable: true,
            selectable: 'single row',
            columnMenu: true,
            pageable: {
            refresh: true,
            buttonCount: 5
            },
            dataBound: onDataBound,
            height: '100%'
        };
        console.info('vm.dataGridOptions : ', vm.dataGridOptions);
        console.info('scope after datagridoptionsloaded: ', $scope);
        console.info('vm.grid: ', vm.grid);
        console.info('scope.vm.grid: ', $scope.vm.grid);
    }

    function getDataFields() {
        return dataservice.getDataFields($routeParams.datatype)
            .then(function(data) {
                initGridOptions(data);
            });
    }

    function onDataBound(ev) {
        console.log('DATABOUND !');
        //vm.grid = ev.sender;
        var gh = $('.datagrid-grid').find('.k-grid-header');
        var gc = $('.datagrid-grid').find('.k-grid-content');
        //var rightPaddingHeader = gh.css("padding-right");
        gh.hide();
        gh.css('padding-right', '0px');
        gc.css('overflow-y', 'auto');
        gh.show();

        //resizeGrid();

        //unbind event
        vm.grid.unbind('dataBound');
    }

    function resizeGrid() {
        console.log('vm.grid.dataSource: ', vm.grid.dataSource);
        // trigger layout readjustment
        vm.grid.resize();
        // force layout readjustment
        vm.grid.resize(true);

        //set new pagesize according to content height to avoid inner scrollbars
        var gridContentWidget = $('.datagrid-grid .k-grid-content');
        console.info('gridContentWidget.height(): ', gridContentWidget.height());
        var rowHeight = $('.datagrid-grid .k-grid-content tr').first().height();
        var newPageSize = Math.floor(gridContentWidget.height() / rowHeight);
        console.info('Setting dataSource to new pageSize: ', newPageSize);
        if(newPageSize != vm.grid.dataSource.pageSize())
            vm.grid.dataSource.pageSize(newPageSize);

        console.info('DataSource pageSize after set: ', vm.grid.dataSource.pageSize);
    }

}

And the corresponding html

<div class="datagrid-container">
<h2>{{vm.dataTitle}}</h2>

  <div class="datagrid-grid">
    <div kendo-grid="vm.grid" 
     k-options="vm.dataGridOptions" 
     k-ng-delay="vm.dataGridOptions" 
     datagrid-resize />
  </div>
</div>

Only in the onDataBound function can I get a reference through the event sender. Any suggestions are highly appreciated.