title: AngularJS '$watch' not firing when value is changed
body: <p>I have a web app that must be viewed with the landscape orientation.</p>
  
  <p>To do this, I have created a function that checks the <code>innerWidth</code> and <code>innderHeight</code>, and if the width is greater than the height then happy days.  This works perfectly for when I load the page, but I which to also check the orientation when the <code>resize</code> event is fired.</p>
  
  <p>So the flow of my code is -</p>
  
  <ol>
  <li>Upon triggering of the <code>resize</code> event call <code>$scope.getOrienttion()</code></li>
  <li>Calculate the current orientation and return the result</li>
  <li>Monitor changes to the value of <code>$scope.getOrienttion()</code> using a <code>watch</code> and update the value of <code>$scope.orientation</code></li>
  </ol>
  
  <p>Steps 1 and 2 above seem to be working fine, but my <code>watch</code> never detects changes to <code>$scope.getOrienttion()</code> and is only fired upon page load.  I must be doing something incorrectly, can anyone please help me to find the problem.</p>
  
  <p>Here is the relevant AngularJS -</p>
  
  <pre><code>christmasApp.controller('bodyCtrl', function($scope, $window){
  
      angular.element($window).bind('resize', function(){
          console.log('Event triggered');
          $scope.getOrientation();
      });
  
      $scope.getOrientation = function(){
  
          var w = $window.innerWidth,
              h = $window.innerHeight;
          var orientation = (w &gt; h) ? 'landscape' : 'portrait'
          console.log('Function triggered - ' + orientation)
          return (w &gt; h) ? 'landscape' : 'portrait';
  
      };
  
      $scope.$watch($scope.getOrientation, function(newValue, oldValue){
          $scope.orientation = newValue;
          console.log('Watch triggered - ' + newValue);
      }, true);
  
  });
  </code></pre>
  
  <p>And here is the HTML that has a conditional class set, depending on the value of <code>$scope.orientation</code> (probably not relevant, but just in case) -</p>
  
  <pre><code>&lt;body &lt;?php body_class(); ?&gt; data-ng-controller="bodyCtrl"&gt;
  
      &lt;div id="orientationMask" data-ng-class="{visible: orientation != 'landscape'}"&gt;
          &lt;p&gt;Please turn your device to the &lt;b&gt;landscape&lt;/b&gt; orientation.&lt;/p&gt;
      &lt;/div&gt;
  
      { Additional code, obscured by the mask if it is show... }
  
  &lt;/body&gt;
  </code></pre>