एनजी-शो को सही पर सेट करना काम नहीं कर रहा है

मेरे पास एक div है जो दिखाता है कि स्थिति बदलने पर उपयोगकर्ता ऑनलाइन है या ऑफलाइन।

<div ng-show="showStatus">
    Status:
    <div ng-show="online">You're online</div>
    <div ng-hide="online">You're offline</div>
</div>

$rootScope वैरिएबल पर स्थिति सेट करना:

    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);
});

div दिखा रहा है जिसमें divs ऑनलाइन या ऑफलाइन दिखा रहा है:

    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);
    }
}])

लेकिन showStatus को सही पर सेट करना और नियंत्रक में इसे फिर से गलत पर सेट करना काम नहीं कर रहा है। मुझे वह div दिखाई नहीं देता जिसमें 2 divs हों। सेटिंग <div ng-show = "true"> काम करती है लेकिन <div ng-show = "showStatus"> काम नहीं करती। मैं क्या गलत कर रहा हूं?