leaflet map inside jqWidget resulting in grey tile

Question

I am using angularjs with jqwidgets as a UI Framework and leaflet with angular-leaflet-directive. When I try to put a leaflet map into a jqDockingLayout / jqRibbon, the maptiles of leaflet are not shown properly (grey background instead of tile).

Here is a minimal Plunker i prepared: https://plnkr.co/edit/NrvXojEmKqA7PuIhDHTM

I tried to call map.invalidateSize(); after document ready and/or after creation of the jqxDockingLayout. I also tried to wrap leaflet in my own directive manually without success.

The intreresting thing is, that if i create a leaflet map manually via jQuery as described in the leafet quick-start within the jqxDockingLayout OR if i put the angular-leaflet-directive into a div outside of the jqxDockingLayout everything works fine.

Maybe related:

• Map based on Leaflet and AngularJS not loaded correctly

Thank your for your effort.

EDIT1: I found a workaround by compiling the map manually inside the controller which additionally injects $compile and $element. Then it looks like this:

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 );
  }
};
...
]);

The interaction with the map works, but it is not the angular way since I am manipulating the DOM inside the controller and i think it is not the right place to init all of the inner directives. Moreover, directives like lf-center are not working anymore.