title: Setting ng-show to true not working
body: <p>I have a <code>div</code> which shows whether the user is online or offline when the status changes.</p>
  
  <pre><code>&lt;div ng-show="showStatus"&gt;
      Status:
      &lt;div ng-show="online"&gt;You're online&lt;/div&gt;
      &lt;div ng-hide="online"&gt;You're offline&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Setting status on <code>$rootScope</code> variable:</p>
  
  <pre><code>    checkInternetApp.run(function ($window, $rootScope) {
      $rootScope.online = navigator.onLine;
      $window.addEventListener("offline", function () {
          $rootScope.$apply(function () {
              $rootScope.online = false;
          });
      }, false);
  
      $window.addEventListener("online", function () {
          $rootScope.$apply(function () {
              $rootScope.online = true;
          });
      }, false);
  });
  </code></pre>
  
  <p>Showing the <code>div</code> which contains <code>divs</code> showing online or offline:</p>
  
  <pre><code>    checkInternetApp.controller("checkInternetController", ["$scope", "$http", "$timeout", function ($scope, $http, $timeout) {
      $scope.showStatus = false;
      $scope.$watch("online", function () {
  
          $scope.showStatus = true; //set to true for 2 seconds
          $timeout(function () {
              $scope.showStatus = false; //hiding after 2 seconds
              console.log("timeout");
          }, 2000)
          console.log($scope.showStatus);
      })
      $scope.showDialog = function () {
          console.log($scope.showStatus);
      }
  }])
  </code></pre>
  
  <p>But setting the <code>showStatus</code> to true and setting it to false again in  the controller is not working. I don't see the <code>div</code> containing the 2 <code>divs</code>. Setting <code>&lt;div ng-show = "true"&gt;</code> works but <code>&lt;div ng-show = "showStatus"&gt;</code> doesn't work. What am I doing wrong?</p>