I found a solution by including the device ready function in index.html and initiating angularjs within the deviceready callback. However, this method is not efficient as it delays UI rendering until the connection to PhoneGap native process is established.
A more effective approach is outlined here. The author suggests using a promise pattern so that only the Phonegap API call waits for the deviceready event. This allows UI rendering and angularjs bindings to be completed before deviceready is triggered, resulting in an improved user experience.
angular.module('fsCordova', [])
.service('CordovaService', ['$document', '$q',
function($document, $q) {
var d = $q.defer(),
resolved = false;
var self = this;
this.ready = d.promise;
document.addEventListener('deviceready', function() {
resolved = true;
d.resolve(window.cordova);
});
// Check to make sure we didn't miss the
// event (just in case)
setTimeout(function() {
if (!resolved) {
if (window.cordova) d.resolve(window.cordova);
}
}, 3000);
}]);
angular.module('myApp', ['fsCordova'])
.controller('MyController',
function($scope, CordovaService) {
CordovaService.ready.then(function() {
// Cordova is ready
});
});