title: Checking network connection status in Cordova and AngularJS
body: <p>It's a basic question as I'm beginner in both Cordova and AngularJS.<br>
  I have an application with <code>Cordova</code> and <code>AngulaJS</code> and I want to check network connectivity using <a href="https://github.com/apache/cordova-plugin-network-information" rel="nofollow">cordova-plugin-network-information</a> in an angular way.</p>
  
  <p>The below code works fine:</p>
  
  <pre><code>var app = angular.module('CordovaPluginTest', []);
  app.run(['$rootScope', function ($rootScope) {
      document.addEventListener('deviceready', function () {
          document.addEventListener('online', toggleCon, false);
          document.addEventListener('offline', toggleCon, false);
          if (navigator.connection.type == Connection.NONE)
              $rootScope.$apply(function () { $rootScope.isOnline = false; });
          else
              $rootScope.$apply(function () { $rootScope.isOnline = true; });
      }, false);
  
      function toggleCon(e) {
          if (e.type == 'online')
              $rootScope.$apply(function () { $rootScope.isOnline = true; });
          else if (e.type == 'offline')
              $rootScope.$apply(function () { $rootScope.isOnline = false; });
      }
  }])
  </code></pre>
  
  <p>But the below one does not work:</p>
  
  <pre><code>var app = angular.module('CordovaPluginTest', []);
  app.run(['$rootScope', function ($rootScope) {
      $rootScope.$on('deviceready', function () {
          $rootScope.$on('online', function () { $rootScope.isOnline = true; });
          $rootScope.$on('offline', function () { $rootScope.isOnline = false; });
          if (navigator.connection.type == Connection.NONE)
                  $rootScope.isOnline = false;
          else
                  $rootScope.isOnline = true;
      });
      $rootScope.$watch('isOnline', function (val) { alert('watch isOnline:'+val);})
  }])
  </code></pre>
  
  <p>Why defining <code>angular event listener</code> doesn't work? In fact it doesn't get the event at all!
  What is the correct way of doing this in angular?</p>