Access videogular's controller.API from a different, sibling, controller

Question

I'm trying to access videogular's controller.API from a different, sibling, controller.

I have read and used the examples from the videogular site and using the API like this:

controller.pauseVideo = function() {
            controller.API.pause();
        };

This works fine, from WITHIN the videogular controller.

I would like to start and stop the video from a navigation controller. This controller is not a parent, but a sibling.

I have set up a $broadcast event in the nav:

myApp.controller('navController', function($scope) {
    $scope.doPause = function() {  // added ng-click="doPause();" to nav link
         $scope.$parent.$broadcast('myCustomEvent', {
           someProp: 'Pause!' 
         }); 
       }
   });

and in the videocontroller I have added a 'listener': (using similar controller set up as demo at http://www.videogular.com/tutorials/videogular-api/)

myApp.controller('videoController', 
         ["$sce","$scope", function ($sce, $scope) {
            var controller = this;
            controller.API = null;

            controller.onPlayerReady = function(API) {
                controller.API = API;
            };

            ... other config settings ...


        $scope.$on('myCustomEvent', function (event, data) {
          console.log(data);
          controller.API.pause();
        });
    }]
    );

The event works, as the data sent is logged in the console when I click the button in the nav. But I also get the error:

Error: controller.API is null

Why is this not working from within $scope.$on?

Answer 1

Maybe you're losing the scope, try by using .bind():

controller.onMyCustomEvent = function (event, data) {
     console.log(data);
     controller.API.pause();
}

$scope.$on('myCustomEvent', controller.onMyCustomEvent.bind(controller));