kendo-ui notification scope variable not set in Angular controller

Question

I've noticed this issue with other kendo-ui controls, but I'll ask specifically about kendo-notification. My html has:

<span kendo-notification="vm.notifier"></span>
<button ng-click="vm.push()">Push it</button>

In my controller I have:

(function () {
'use strict';

angular
    .module('app.layout')
    .controller('Shell', Shell);

function Shell() {
    /*jshint validthis: true */
    var vm = this;

    vm.push = push;

    activate();

    function activate() {
        vm.notifier.show('Loaded', 'info');
    }

    function push() {
        vm.notifier.show('Pushed', 'info');
    }

}
})();

My problem: If I click the button, I get the notifier. But, on loading, I get: TypeError: Cannot read property 'show' of undefined at activate (http://localhost:57624/app/layout/shell.controller.js:41:24) at new Shell (http://localhost:57624/app/layout/shell.controller.js:32:9)

I'm sure I'm missing something about the object state in Angular, but what am I missing that I cannot show this notification during the load phase of the controller?

Answer 1

When you're calling activate in the controller function, the Kendo UI widget has not been created yet. One solution to this is to use one of the global events Kendo UI has for this scenario (kendoRendered):

angular.module('app.layout', [ "kendo.directives" ])
    .controller('Shell', function ($scope) {       
        $scope.activate = function () {
            $scope.notifier.show('Loaded', 'info');
        };

        $scope.push = function () {
            $scope.notifier.show('Pushed', 'info');
        };

        $scope.$on("kendoRendered", function(event){
            $scope.activate();
        });
    }
);   

(demo)