Angular Kendo Splitter связывает данные только на первой панели

У меня возникли проблемы с выяснением, почему Angular не связывает данные нигде после первой панели моего разделителя Kendo-UI.

Вот соответствующий HTML-код с посторонним использованием {{formData.hello}}, чтобы проиллюстрировать, когда возникает проблема:

<div ng-controller="MyCtrl">
    <p>A = {{formData.hello}}</p>
    <div id="idLeftRight">
        <div>
            <p>Content on the left.</p>
            <p>B = {{formData.hello}}</p>
        </div>
        <div>
            <p>Content on the right.</p>
            <p>C = {{formData.hello}}</p>
        </div>
    </div>
    <p>D = {{formData.hello}}</p>
</div>

Выше показано «A = Hello world» и «B = Hello world», но «C = {{formData.hello}}» и «D = {{formData.hello}}».

Если вторая панель (div, содержащая «C =») удалена, поэтому в разделителе остается только одна панель, то «D = Hello world» появляется, как и ожидалось.

Вот Javascript:

angular.module("app", [ "kendo.directives" ]);

function MyCtrl($scope) {      
    $scope.formData = {};
    $scope.formData.hello = "Hello world";

    $('#idLeftRight').kendoSplitter({
        orientation: "horizontal",
        panes: [
            { collapsible: false, size: "30%" },
            { collapsible: false },
        ]
    });
}

Планкер: проблема с разделителем кендо

Однако, если я изменю div с идентификатором "idLeftRight" на:

<div kendo-splitter
    k-panes="[ { collapsible: false, size: '30%' } , { collapsible: false } ]"
    k-orientation="horizontal">

тогда это работает.

Почему kendoSplitter() ведет себя иначе, чем kendo-splitter? Я делаю что-то неправильно?