AngularJS - ng-show with scope variable not working

Question

I am trying to hide/show certain things when the orientation of the phone changes.

Here is my view:

<div ng-controller="ModelCtrl">
    <p ng-show="isLandscape">Landscape - {{ isLandscape }}</p>
    <p ng-show="!isLandscape">Portrait - {{ !isLandscape }}</p>
</div>

And here is the controller snippet:

    $scope.isLandscape = false;

    // Listen for orientation changes
    window.addEventListener("orientationchange", function() {
        // Announce the new orientation number
        switch(window.orientation) 
        {  
          case -90:
          case 90:
            $scope.isLandscape = true;
            alert($scope.isLandscape);
            break; 
          default:
            $scope.isLandscape = false;
            alert($scope.isLandscape);
            break; 
        }
    }, false);

I am able to alert the correct value of isLandscape on orientation change, but it seems it does not update the view, so it is always saying its in "portrait mode - true".

Answer 1

You are missing a $scope.$apply():

$scope.isLandscape = false;

// Listen for orientation changes
window.addEventListener("orientationchange", function() {
    // Announce the new orientation number
    switch(window.orientation) 
    {  
      case -90:
      case 90:
        $scope.isLandscape = true;
        $scope.$apply(); // <--
        break; 
      default:
        $scope.isLandscape = false;
        $scope.$apply(); // <--
        break; 
    }
}, false);

Once you change the value, Angular doesn't have a way of knowing that it should check whether the value has changed or not. $scope.$apply will trigger a digest loop which will make Angular notice that $scope.isLandscape has changed.

---

A better solution is to inject $window into your controller and add the orientationchange event listener to it instead. That will obviate the need for the $scope.$apply.