Setting ng-show to true not working - angularjs

Question

I have a div which shows whether the user is online or offline when the status changes.
<div ng-show="showStatus">
Status:
<div ng-show="online">You're online</div>
<div ng-hide="online">You're offline</div>
</div>
Setting status on $rootScope variable:
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);
});
Showing the div which contains divs showing online or offline:
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);
}
}])
But setting the showStatus to true and setting it to false again in the controller is not working. I don't see the div containing the 2 divs. Setting <div ng-show = "true"> works but <div ng-show = "showStatus"> doesn't work. What am I doing wrong?

Answer 1

You have some simple mistakes in your code. While you using $scope.showStatus and $rootScope.online your code should be like this:
Watch $rootScope
.... instead of $scope while $rootScope.online is an $rootScope param.
$rootScope.$watch("online", function (newValue, oldValue) {
if (newValue) {
$scope.showStatus = true; //set to true for 2 seconds
$timeout(function () {
$scope.showStatus = false; //hiding after 2 seconds
$rootScope.online = false;
}, 2000)
}
});
View
Access $rootScope params in view with $root.<objectName>:
<div ng-show="showStatus">
Status:
<div ng-show="$root.online">You're online</div>
<div ng-hide="$root.online">You're offline</div>
</div>
--> Demo fiddle

Answer 2

You should change $scope.$watch to $rootScope.$watch, because of the online object is a rootScope object.
I guess the problem is you have using $scope.showStatus = false; within 2 seconds. So the div won't show. just remove the $scope.showStatus = false; line from $timeout function and check.
Also you should follow which I have mentioned you in the comment under your question.
Don't use $rootScope. If you refresh your browser, then the scope values are clear . I'll suggest you need go with $service or $Broadcast
And in my guess, you don't need to use $timeout, You may need this below logic.
$rootScope.$watch("online", function (oldValue,newValue) {
$scope.showStatus = false;
$scope.IsOnline= newValue;
if(newValue)
$scope.showStatus = true;
console.log($scope.showStatus);
})
$scope.showDialog = function () {
console.log($scope.showStatus);
}
and the HTML
<div ng-show="showStatus">
Status:
<div ng-show="IsOnline">You're online</div>
<div ng-hide="IsOnline">You're offline</div>
</div>