backbutton event (cordova) not affecting angularjs controller variables as expected

Question

I am getting unpredictable results from trying to integrate cordova.js into my angular controller.

    <div class="side-menu" ng-class="{'show_menu' : show_menu }" ng-swipe-left="show_menu = !show_menu"> // more stuff</div>

INITAL CODE:

   $scope.init =function() {

        document.addEventListener("deviceready", $scope.onDeviceReady, false);
    }

   $scope.onDeviceReady = function() {

       document.addEventListener("backbutton", $scope.onBackKeyDown, false);
    }

WORKING:

  $scope.onBackKeyDown = function($scope) {
        alert('backbutton pressed');
    }

ALSO WORKING

This calls a function (unlrelated to show_menu and succesfully changes the state of show_menu

$scope.onBackKeyDown = function() {
    $scope.filterby('dance');
    $scope.show_menu = !$scope.show_menu;
}

NOT WORKING

Quite simply nothing happens here

$scope.onBackKeyDown = function() {
    $scope.show_menu = !$scope.show_menu;
}

I have $scope.show_menu declared as false as soon the controller starts so I cant figure out why its relying on an unrelated function to be called before it starts to work.

EDIT:

I have discovered it is working but it waits until the following angularjs event. eg nothing happens with the menu, but then if I click trigger another event afterwards thats unrelated the menu, THEN the menu state changes.

Answer 1

You may want to use $apply() angular events and addEventListener are separate thats why sometimes you need to use "$apply()" because it updates the angular code. Alternately you may want to use a Factory or Service to keep track of the the variables that you are passing between events. One other options would be if you wanted to avoid using apply use the "controller as syntax" example ng-controller="AppCtrl as app" then attach your variables as app.show_menu for example.