Leaflet map in ionic/angular map displays grey tiles

I'm working on a mapping app using ionic and leaflet. Note that I am not using the leaflet angular directive, I am using straight JS for the leaflet map (I know, I know...).

The initial state in my app loads the leaflet map just fine. If I switch to another state and back to the map everything is also fine. However, if I launch the app, switch to a different state and open a modal window in that state, then return to the original state, the map is broken and displays a number of grey tiles. The map will not update until the browser window resizes or the orientation of the mobile device is changed.

Here's a demo on Plunker: http://plnkr.co/edit/w67K2b?p=preview. To reproduce:

1. Click the button at the right side of the navbar which will take you to a different state.
2. Click the 'Back to map' button to go back to the original state. The map looks just fine.
3. Click the button in the navbar again.
4. Click the 'Open modal' button and then close the modal.
5. Click the 'Back to map' button and you will see that the map is now broken.

I've seen other people report issues with grey tiles, which typically can be resolved with a call to:

map.invalidateSize()

Unfortunately this does not resolve my issue. I'm pretty much a newb, but I think the problem is that when the modal opens, the invalidateSize() method in the leaflet source code is run, since the map div is not visible, the 'size' gets set to x:0, y:0 which ends up breaking the map when I transition back to the original state.

I'm not really sure where to go from here. Perhaps I can use JS to dynamically resize the div and trick leaflet into thinking a resize event has occurred? How would I do this? Any other thoughts?

Thanks!