Trying to integrate Phonegap Connection API with AngularJS - angularjs

Question

I'm trying to use PhoneGap Connection API inside my Angular/Ionic project. What I want is to check the user's network and if it's NONE I want to show a specific div and if it's not NONE, show another div by using the ng-show directive.
Here is my code so far:
controller.js
.controller('LoginCtrl', function($scope, CheckConnection) {
$scope.net = CheckConnection.networkState();
})
.factory('cordovaReady', function() {
return function (fn) {
var queue = [];
var impl = function () {
queue.push(Array.prototype.slice.call(arguments));
};
document.addEventListener('deviceready', function () {
queue.forEach(function (args) {
fn.apply(this, args);
});
impl = fn;
}, false);
return function () {
return impl.apply(this, arguments);
};
};
})
.factory('CheckConnection', function(cordovaReady) {
return {
networkState: cordovaReady(function() {
var net = navigator.connection.type;
if(net == 'none') {
var internet = false;
} else {
var internet = true;
}
return internet;
})
};
})
view.html
<ion-nav-view name="login">
<div ng-hide="LoginCtrl.net">
NO CONNECTION {{net}}
</div>
<div ng-show="LoginCtrl.net">
CONNECTED {{net}}
</div>
</ion-nav-view>
I'm pretty new with Angular and PhoneGap so this issue may be very simple to solve but I just can't figure it out :( Any help will be much appreciated, thanks!

Answer 1

try this:
<ion-nav-view name="login" ng-controller="LoginCtrl">
<div ng-hide="net">
NO CONNECTION {{net}}
</div>
<div ng-show="net">
CONNECTED {{net}}
</div>

Answer 2

Ok, I found the solution! Angular has it's own way to check connection so I don't even need PhoneGap for this.
Here is my new controller.js:
.controller('LoginCtrl', function($window, $scope ) {
$scope.online = navigator.onLine;
$window.addEventListener("offline", function () {
$scope.$apply(function() {
$scope.online = false;
});
}, false);
$window.addEventListener("online", function () {
$scope.$apply(function() {
$scope.online = true;
});
}, false);
})
And view.html
<ion-nav-view name="login">
<div ng-hide="online">
NO CONNECTION
</div>
<div ng-show="online">
CONNECTED
</div>
</ion-nav-view>
Hope it helps someone else :D