detecting network after view loaded in ionic app

i am using ionic framework. what i want is that the app should display one card if network is available and other card if no-network is available.

i have the following code in my controller

.controller('PlaylistsCtrl', function($scope) {

init=function(){
 alert(navigator.connection.type);
}

  init();
})

the alert returns 0 zero not sure why that is.

so i tried to hook up a button and see the same code

<button ng-click="demo()" class="button button-positive">get network</button>

and in the controller

.controller('PlaylistsCtrl', function($scope) {

 $scope.demo=function(){
  alert(navigator.connection.type);
  }
})

now i do get the correct result so i get wifi,2g etc

so i think that angular is executing before the navigator.connection.type is resolved.

How do i detect the network on view load?

Don't start your app until the device is ready

  document.addEventListener('deviceready', function() { 
    angular.bootstrap(document, ['YourAppName']);
  }, false);
  var YourAppName = angular.module('YourAppName', []);