How do you call an AngularJS function from javascript?

Question

I am trying to call the AngularJS method advanceSlide() from my Javascript after the if statement, however,this line:

angular.element(document.getElementById('FotoSpill')).scope().advanceSlide();

doesn't seem to be working. Here is the full code.

Javascript

    window.onload = function() {
    cast.receiver.logger.setLevelValue(0);
    window.castReceiverManager = cast.receiver.CastReceiverManager.getInstance();
    console.log('Starting Receiver Manager');

    // handler for the CastMessageBus message event
    window.messageBus.onMessage = function(event) {
      console.log('Message [' + event.senderId + ']: ' + event.data);
      // display the message from the sender
      displayText(event.data);
      if (event.data == "quit") {
        angular.element(document.getElementById('FotoSpill')).scope().advanceSlide();
      };
      // inform all senders on the CastMessageBus of the incoming message event
      // sender message listener will be invoked
      window.messageBus.send(event.senderId, event.data);
}

ANGULARJS

var FotoSpill = angular.module('FotoSpill', []);
FotoSpill.config(['$routeProvider', '$locationProvider', function( $routeProvider,     $locationProvider ) {$routeProvider.when('/tag/:tag');}]);
FotoSpill.controller('slideshow', function ( $scope, $http, $timeout, $route, $location ) {
        // Set the API endpoint
        var api = 'https://api.instagram.com/v1/locations/436022/media/recent?access_token=257058201.9af4692.3d68e63b114944a0be332da732923a23&callback=JSON_CALLBACK',
            newReq, refreshApi;
        var seconds = 1000;


        $scope.fetchImages = function() {

            $scope.loadingClass = 'loading';
            $scope.imgCurrent = 0;


            // if ( ! $route.current )
            //  $location.path( '/tag/' + $scope.tag );
            // else if ( angular.isDefined( $route.current.params.tag ) )
            //  $scope.tag = $route.current.params.tag;

            $http.jsonp( 
                api.replace( '%tag%', $scope.tag )
            ).success( function( data ) {
                delete $scope.loadingClass;

                $scope.images = data.data;

                // Set the first image active
                if ( data.data.length )
                    $scope.makeActiveSlide( $scope.imgCurrent );

                // Cancel the previous update request
                if ( refreshApi )
                    $timeout.cancel( refreshApi );

                // Check for new images on every loop
                if ( data.data.length )
                    refreshApi = $timeout( $scope.fetchImages, 60*seconds );
            }).error( function() {
                delete $scope.loadingClass;
                refreshApi = $timeout( $scope.fetchImages, 2*seconds );
            });
        }

        // Fetch images
        $timeout( $scope.fetchImages );

        $scope.advanceSlide = function() {
            // Method 1
            // Use a classname to highlight the current active slide
            if ( angular.isDefined( $scope.images ) && $scope.images.length )
                $scope.makeActiveSlide( $scope.imgCurrent + 1 );


            $timeout( $scope.advanceSlide, 6*seconds );  //time between slide transition
        }

    }
).filter(
    'escape', function () {
        return function( input ) {
            return escape( input );
        }
    }   
);

Answer 1

you need to apply your changes

angular.element(document.getElementById('FotoSpill')).scope().$apply('$scope.advanceSlide()');

try that

Answer 2

Don't know how is your HTML, but it seems the problem is about the DOM selected, or say, jqLite selecter.

If you are using something like <div ng-controller="slideshow"></div> , you can use:

angular.element('[ng-controller=slideshow]').scope().$apply('advanceSlide()');

This code first try to find the correct DOM node regarding the scope you want to access with angular.element , then retrieve its scope through scope() , finally $apply a expression in the context of the scope.