title: AngularJS: ng-show element visible while the condition is not met
body: <p>HTML:</p>
  
  <pre><code>&lt;div ng-app ng-controller="AppController"&gt;
      boxWidth: {{boxWidth}}
      &lt;div ng-show="activeWindow1" style="border:1px solid black; width: {{boxWidth}}px; height:20px;"&gt;
      &lt;/div&gt;
      &lt;div ng-show="activeWindow2" style="border:1px solid red; width: {{boxWidth}}px; height:20px;"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>function AppController($scope) {
      $scope.getWidth = function() {
          return $(window).width();
      };
      $scope.$watch($scope.getWidth, function(newValue, oldValue) {
          $scope.boxWidth = newValue / 10;
          $scope.activeWindow2 = true;
      });
      window.onresize = function(){
          $scope.$apply();
      }
  }
  </code></pre>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/fQgXQ/20/" rel="nofollow">http://jsfiddle.net/fQgXQ/20/</a></p>
  
  <p>Note that activeWindow1 is never set to true, so technically we should never see the black box, right? Try resizing the window, resulting in the $scope.apply(); call and see what happens.</p>
  
  <p>Result: Both boxes are visible (recent Chrome browser).</p>
  
  <p>There is an easy workaround, which is to take the ng-show out into a new div, making the current one its child. However, I'd like to understand why this is happening as it certainly seems like an Angular bug. I suspect I'm just doing something I'm not supposed to with the {{boxWidth}} inside style="". If so, what's a proper way?</p>