Draggable Overlay as a nested state


I’m trying to build a custom directive that allows me to slide in a details. An example of what I’ve build so far can been seen here:

In order to prevent scrolling while I’m dragging the view, I’m using a hack that has been posted here:

(This hack is not available on codepen)

So far everything works nearly as desired. Just 2 problems I can’t get solved.

1) Scope of the state controller is not available in the Directive
I’m defining a Controller for the Details State called “DetailsCtrl” (see line 30 in CodePen JS file). But for reasons I’m not understanding, the scope of my ionNavViewDetails directive seems to be a parent scope of the state…
This causes an error when I try to load the details content from within the directive (see line 132 in CodePen JS file)

2) The $animate:close event is not fired when the directive is animated
Because I’m using this plugin for a map in the main-view

I need to know when the animation is finished so that I can tell the maps plugin to refresh the layout and recognize the new overlay.
Therefore I’ve a listener for the ‘$animate:close’ event (see line 148 in CodePen JS file) but unfortunately the event never get’s fired like it should according to this post:

With Angular 1.3.x there seem to be some new callbacks but so far ionic uses v1.2.x

I’ve already spend my whole day trying to get this work and would be more the happy if anybody has an idea how to solve this!