Ionic: trouble using ngCordova to check online/offline status - angularjs

Question

I'm using ngCordova "Network Information" plugin to get the online/offline status of the host device. I have followed this tutorial (which excellent, as are his other posts):
Josh Morony - Monitoring Online and Offline States in an Ionic Application
I have implemented the "ConnectivityMonitor" service as described in the article.
In one of my controllers/templates it works perfectly:
(function() {
'use strict';
angular
.module('myApp')
.controller('ResearchController', ResearchController);
ResearchController.$inject = ['$scope', '$stateParams', 'MyApi', 'ConnectivityMonitor'];
function ResearchController($scope, $stateParams, MyApi, ConnectivityMonitor) {
var vm = this;
vm.isOnline = ConnectivityMonitor.isOnline();
...
}
<ion-view title="RESEARCH" ng-controller="ResearchController as vm" >
<ion-content>
<div>
ONLINE: {{vm.isOnline}}
</div>
</ion-content>
</ion-view>
Result:
ONLINE: true
However, in another controller/template this does not work and I have been at this for hours and hours:
(function() {
'use strict';
angular
.module('MyApp')
.controller('HomeController', HomeController);
HomeController.$inject = ['$scope','ConnectivityMonitor'];
function HomeController($scope, ConnectivityMonitor) {
var vm = this;
vm.isOnline = ConnectivityMonitor.isOnline();
activate();
////////////////
function activate() {
}
}
})();
<ion-content class="background" ng-controller="HomeController as vm">
<p>ONLINE: {{vm.isOnline}}</p>
</ion-content>
Result:
ONLINE: {{vm.isOnline}}
Here ^^^ it seems that angular is not performing the databinding. I have all of my relevant controllers in index.html, as well as angularjs references.
Here is my implementation of the "ConnectivityMonitor" service:
(function() {
'use strict';
// http://www.joshmorony.com/monitoring-online-and-offline-states-in-an-ionic-application/
angular.module('MyApp').factory('ConnectivityMonitor', ['$rootScope', '$cordovaNetwork', connectivityMonitor]);
function connectivityMonitor($rootScope, $cordovaNetwork) {
return {
isOnline: function () {
if (ionic.Platform.isWebView()) {
return $cordovaNetwork.isOnline();
} else {
return navigator.onLine;
}
},
isOffline: function () {
if (ionic.Platform.isWebView()) {
return !$cordovaNetwork.isOnline();
} else {
return !navigator.onLine;
}
}
};
}
}
)();
Any idea why this would not be working? I'm new to AngularJS and Ionic so I'm thinking there is some nuance or convention that I'm overlooking. Thanks.
[ UPDATE 1 ]
I recreated this issue in an ionic starter app. There are two templates: Home.html and Workshere.html, with respective controllers. The online status is correctly displayed in the "Workshere" state, and is incorrect in the "Home" state. Also, adding the HomeController to Home.html (via ng-controller) seems to kill all interactivity on that page, can't even click the "Go to Workshere" link.
Home.html and home state is the default state for the MyApp. I'm starting to think that this is a timing issue an ConnectivityMonitor is not ready when the home state loads.
Code follows:
Home.html
<ion-view>
<ion-content ng-controller="HomeController">
<br/><br/><br/>
<p>HOME</p>
<p>ONLINE: {{vm}}</p>
<br/><br/>
<a ui-sref="workshere">Go to WorksHere</a>
</ion-content>
</ion-view>
home.controller.js
(function() {
'use strict';
angular
.module('myApp')
.controller('HomeController', HomeController);
HomeController.$inject = ['$scope','ConnectivityMonitor'];
function HomeController($scope, ConnectivityMonitor) {
$scope.vm = ConnectivityMonitor.isOnline();
activate();
////////////////
function activate() {
}
}
})();
Workshere.html
<ion-view ng-controller="WorkshereController as vm" >
<ion-content>
<br/><br/><br/>
<p>WORKS HERE</p>
<p>ONLINE: {{vm.isOnline}}</p>
<br/><br/>
<a ui-sref="home">Go to Home</a>
</ion-content>
</ion-view>
workshere.controller.js
(function() {
'use strict';
angular
.module('myApp')
.controller('WorkshereController', WorkshereController);
WorkshereController.$inject = ['$scope', 'ConnectivityMonitor'];
function WorkshereController($scope, ConnectivityMonitor) {
var vm = this;
vm.isOnline = ConnectivityMonitor.isOnline();
activate();
////////////////
function activate() {
}
}
})();
app.js
angular.module('myApp', ['ionic', 'ngCordova'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home.html'
})
.state('workshere', {
url: 'workshere',
templateUrl: 'workshere.html'
});
$urlRouterProvider.otherwise('/');
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/connectivityMonitor.js"></script>
<script src="js/home.controller.js"></script>
<script src="js/workshere.controller.js"></script>
</head>
<body ng-app="myApp">
<ion-nav-view>
</ion-nav-view>
</body>
</html>
ConnectivityMonitor.js
(function() {
'use strict';
// http://www.joshmorony.com/monitoring-online-and-offline-states-in-an-ionic-application/
angular.module('myApp').factory('ConnectivityMonitor', ['$rootScope', '$cordovaNetwork', connectivityMonitor]);
function connectivityMonitor($rootScope, $cordovaNetwork) {
return {
isOnline: function () {
if (ionic.Platform.isWebView()) {
return $cordovaNetwork.isOnline();
} else {
return navigator.onLine;
}
},
isOffline: function () {
if (ionic.Platform.isWebView()) {
return !$cordovaNetwork.isOnline();
} else {
return !navigator.onLine;
}
},
startWatching: function(){
if(ionic.Platform.isWebView()){
$rootScope.$on('$cordovaNetwork:online', function(event, networkState){
console.log("went online");
});
$rootScope.$on('$cordovaNetwork:offline', function(event, networkState){
console.log("went offline");
});
}
else {
window.addEventListener("online", function(e) {
console.log("went online");
}, false);
window.addEventListener("offline", function(e) {
console.log("went offline");
}, false);
}
}
};
}
}
)();
Please see comments at the "UPDATE 1" marker.

Answer 1

Why don't you try it this way:
function HomeController($scope, ConnectivityMonitor) {
$scope.vm = ConnectivityMonitor.isOnline();
}
and for view
<ion-content class="background">
<p>ONLINE: {{vm}}</p>
</ion-content>