change phone orientation but scope variable doesn't refresh

Question

I am using cordova plugin to handle orientation. I want to change to a different view if orientation changes. So I try to define a variable in $scope and do related changes on UI. here is my code

window.addEventListener("orientationchange", function() { 
    $scope.orientation = screen.orientation;
});

this code snippet I referred from cordova plugin orientation homepage. but the UI doesn't have any change when orientation changes. I even got $scope.orientation undefined(I tested by ng-show)

How did this happen? Thanks for any help.

Answer 1

Use $apply().

angular.element($window).on("orientationchange", function() { 
    $scope.orientation = screen.orientation;
    $scope.$apply();
});

This lets the AngularJS framework know a change has occurred.