карта листовки внутри jqWidget, в результате чего появляются серые плитки

Я использую angularjs с jqwidgets в качестве фреймворка пользовательского интерфейса и листовки с директивой angular-leaflet. Когда я пытаюсь поместить карту листовки в jqDockingLayout/jqRibbon, карты листовок не отображаются должным образом (серый фон вместо плитки).

Вот минимальный плункер, который я подготовил:

Я пытался вызвать map.invalidateSize(); после того, как документ готов и/или после создания jqxDockingLayout. Я также безуспешно пытался обернуть листовку в свою директиву вручную.

Интересно то, что если я создаю карту листовок вручную с помощью jQuery, как описано в кратком руководстве по листовкам в jqxDockingLayout ИЛИ, если я помещаю директиву angular-leaflet в div вне jqxDockingLayout, все работает нормально.

Возможно связано:

• Карта на основе Leaflet и AngularJS загружена неправильно

Спасибо за ваши усилия.

EDIT1: я нашел обходной путь, скомпилировав карту вручную внутри контроллера, который дополнительно вводит $compile и $element. Тогда это выглядит так:

demoApp.controller("demoController", [
...
$scope.settings = {
  width: 500,
  height: 500,
  layout: layout,
  created : function () {
    // Initialize Directives inside
    var x = angular.element( '<leaflet width="100%" height="100%"></leaflet>' );
    $element.find('#mapContainer').append( x );
    $compile( x )( $scope );
  }
};
...
]);

Взаимодействие с картой работает, но это не угловой способ, так как я манипулирую DOM внутри контроллера и думаю, что это неподходящее место для инициализации всех внутренних директив. Более того, директивы типа lf-center больше не работают.