Control via custom directive show of div in template

Hello together,
I like to do some “strange” things. Maybe. Not sure there is any better way. I try to describe it as short as possible.

I am using the videogular-player and the vg-quality plugin. Via the plugin the user can control the video-quality, but I had to customize the directive in some way.

So far so good, now I like to show some loading-spinner when the user change quality and it looks like I am getting crazy with that thing.

My idea was to set an scope-variable in the directive to true or false and in the template I have an div with ng-show and that variable. But it is not as easy as that, because I cannot manipulate the scope-variable in the template.

Some code for better understanding:

In the Template we got this here:

<div ng-show="loading" class="spinner"></div>

So, I like to set this $scope.loading in my directive, in the controller I have access to it, but not in the vg-quality-directive.

Code for the directive in the template:

<vg-quality quality-sources="controller.config.qualitySources" default-quality="controller.currentQualitySource"></vg-quality>

So yeah, that’s just the basic stuff and I have no idea how to get the loading-scope to my directive. I know that normally the directive have their own scopes, but I already hear about the two way data binding between controller and directive, but I don’t get it work.

Maybe the other thing is, that inside vg-quality there is another directive vg-quality-selector, and that directive contains the function which should manipulate the loading-scope.

Hope I didn’t describe the problem too bad. The code to vg-quality can be seen here:

Thanks for any help. I am quite sure that I am just move in a circle and the solution is really simple…

Edit: Another really simple idea was to manipulate the DOM in the directive. But I think that is like give the framework a bullet.