How to access videogular's API inside a directive

Question

I need multiple videogular videos on a page, each one with a button beneath to start the video. In order to have a scope for every single video I need to put them into directives, as discussed here.

I'm not able to access videogular's API though. I'm pretty sure the problem is the onPlayerReady function. There is quite a lot of documentation on the API, I didn't manage to get it to work though.

Directive:

.directive("topmVideogularDirective", function () {
    return {
        restrict: 'E',
        scope: {
            data: "=",
            config: "="
        },
        template: '<videogular vg-plays-inline="true" vg-player-ready="onPlayerReady"><vg-media vg-src="data" vg-native-controls="false" vg-loop="true"></vg-media></videogular><button ng-click="test()">test</button>',
        link: function (scope) {
            scope.$API = null;
            scope.onPlayerReady = function($API) {
                console.log("tell me you're there");
                scope.$API = $API;
            };
            scope.test = function(){
                scope.$API.play();
            };   
        }
    };

Full code pen: http://codepen.io/anon/pen/dMKKbX

There is also another maybe related question on SO: stop other video that is playing in background on play the new one

And a discusson on Github as mentioned above: https://github.com/videogular/videogular/issues/59