ng Leaflet Directive issue with ngRepeat + map.invalidateSize()

Question

I have a page that generates a series of maps based off of an async call. When the maps first load, they are missing tiles, as seen in the below image.

I can resolve this by calling map.invalidateSize() to redraw the tiles in each. Currently I create 8 on load and the rest are paginated via an Angular directive. Toggling to any other 8 or switching back and forth will "fix" the first 8.

Since these first 8 are the product of an ngRepeat , they all have the same ID. I could, in theory, add the index or some other string modification to the ids of each of the 8 maps and create a loop of the below code to run map.invalidateSize() on each, but this seems like a roundabout and overall poor solution to the issue. Does anyone have a better suggestion?

leafletData.getMap('leafletMap-trips').then(function(map) {
    setTimeout(function () { map.invalidateSize() });
});

Answer 1

As a matter of fact, nope. The leaflet API only allow size invalidation per-map, so you will pretty much need to do as you explained.