How to integrate Cordova/Phonegap plugins within Angular/Ionic the right way?

I have a question about integrating Cordova/Phonegap plugins within my Ionic project.

I’m using the PushPlugin and the Local Notifications plugin. I’m unsure as to what would be the right, Angular / Ionic approved way to initialise and use these plugins in the app. My question isn’t specific to these plugins per se but apply to all PG plugins.

Should I initialise plugins in the $ionicPlatform.ready function? I currently have $ionicPlatform.ready tied to my home controller, but that means they will be called every time a user views the home screen so that can’t be right.

Any advice?


Hey @coen_warmer, a good way to do this is to use the run function:

angular.module('myModule', ['ionic'])
.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Initialize plugin here

Does that help?

I’m having trouble getting the notification back of a successful registration using PushPlugin. I tested it without ionic and angular, so I know that it is sending the notification, but when I put the code into the $ionicPlatform.ready code like Max states about I can’t get the notification to be heard.

Anyone have a recommendation or some working code they could show?

I haven’t dealt with push notifications before; so I may not be of much value. Are you sure this is not a matter of the asynchronous nature of most PhoneGap operations? Since they occur outside of the AngularJS digest cycle, you may not see the results. Perhaps wrap your result in $rootScope.$apply ?

1 Like

BTW, is there any difference to use $ionicPlatform.ready or ionic.Platform.ready?


I would create some method:

isScopeInCycle = function () {
        return $rootScope.$root.$$phase != '$apply' && $rootScope.$root.$$phase != '$digest';

and use:

 if(isScopeInCycle()){/*   */} 

I’m using pushplugin

Here is what I was trying:

angular.module(‘’, [])


    $ionicPlatform.ready(function($scope, $window){
              var pushNotification;
            pushNotification = window.plugins.pushNotification;
            pushNotification.register(successHandler, errorHandler,{"senderID":"**myGCMid**","ecb":"onNotificationGCM"});		// required!


I can put the successHandler and the errorHandler functions in this same place and they work fine. But the onNotificationGCM callback only works if I put it above my angular code making my code look like this:

function onNotificationGCM (e){
alert(‘push message’+e);

angular.module(‘’, [])

I’ve tried window.onNotificationGCM to try to get the callback and $window.onNotificationGCM, but they don’t seem to work. I’ve trying changing the callback to functions inside angular using $rootScope.onNotificationGCM and $scope.onNotificationGCM, but they also don’t work.

Did you try variations of $apply ?

Like :

function safeApply( fn ) {
    if( !$rootScope.$$phase ) {
    } else {

function onNotificationGCM (e){
    alert('push message'+e);

safeApply( onNotification(e));

FYI : See also : Possible Cordova/KitKat Bug with Camera Plugin. Anyone Else?

Has anyone documented the correct way to do this.
I am in the process of adding push to my app and would appreciate any help


I’m using the following code to bridge from the global function to an angular service:

window.onNotificationGCM = function (event) {
    var pushService = angular.element(document.querySelector('body')).injector()

But perhaps there is a better way to do so?
Edit: add

1 Like

Someone is putting together a repo for this.

1 Like

Here’s the way I did it using the PushPlugin. It probably includes some information you already know, but I was trying to be complete. Maybe there’s some helpful code here.

Anyone have a complete example? I have tried to used this example but it doesn´t work.

This is my app.js code:

    function onNotificationGCM(e) {
    console.log('EVENT -> RECEIVED:' + e.event + '');
    switch( e.event )
        case 'registered':
            if ( e.regid.length > 0 )
                console.log('REGISTERED with GCM Server -> REGID:' + e.regid + "");
                //call back to web service in Angular.  
                var elem = angular.element(document.querySelector('[ng-app]'));
                var injector = elem.injector();
                var myService = injector.get('PushProcessingService');
        case 'message':
            // if this flag is set, this notification happened while we were in the foreground.
            // you might want to play a sound to get the user's attention, throw up a dialog, etc.
            if (e.foreground)
                //we're using the app when a message is received.
                console.log('--INLINE NOTIFICATION--' + '');
                // if the notification contains a soundname, play it.
                //var my_media = new Media("/android_asset/www/"+e.soundname);
                // otherwise we were launched because the user touched a notification in the notification tray.
                if (e.coldstart)
                    console.log('--COLDSTART NOTIFICATION--' + '');
                    console.log('--BACKGROUND NOTIFICATION--' + '');
                // direct user here:
                window.location = "#/tab/featured";
            console.log('MESSAGE -> MSG: ' + e.payload.message + '');
            console.log('MESSAGE: '+ JSON.stringify(e.payload));
        case 'error':
            console.log('ERROR -> MSG:' + e.msg + '');
            console.log('EVENT -> Unknown, an event was received and we do not know what it is');

angular.module('myApp', ['ionic'])




.factory('PushProcessingService', function() {
        function onDeviceReady() {
  'NOTIFY  Device is ready.  Registering with GCM server');
            //register with google GCM server
            var pushNotification = window.plugins.pushNotification;
            pushNotification.register(gcmSuccessHandler, gcmErrorHandler, {"senderID":gcmAppID,"ecb":"onNotificationGCM"});
        function gcmSuccessHandler(result) {
  'NOTIFY  pushNotification.register succeeded.  Result = '+result)
        function gcmErrorHandler(error) {
            console.error('NOTIFY  '+error);
        return {
            initialize : function () {
      'NOTIFY  initializing');
                document.addEventListener('deviceready', onDeviceReady, false);
            registerID : function (id) {
                //Put code for the Notifion Server here.  For example:
                    if ( {
              'NOTIFY  Registration succeeded');
                    } else {
                        console.error('NOTIFY  Registration failed');
            //unregister can be called from a settings area.
            unregister : function () {
                var push = window.plugins.pushNotification;
                if (push) {
                    push.unregister(function () {
              'unregister success')

In my console, the result is this error:

Uncaught ReferenceError: myService is not defined app.js:91
registerID app.js:91
(anonymous function) app.js:66
(anonymous function) ionic.bundle.js:33051
onPlatformReady ionic.bundle.js:2261

What is wrong?

@gdp_fran Please format your code correctly, it is quite difficult to read your code this way.

I am sorry.I have fixed the code.

Hello… nobody knows what is wrong in my code?

Thank you in advance

Hey @gdp_fran, I believe the problem is that you call myService.registerID(regid).then(function(response){ in the return method of PushProcessingService.
But at that point myService is nothing. I can’t debug your code, It is too abstract and unstructured like this. But I would say that you need to either inject the dependency or put myService in a global var (but preferably the fist)

Hope that helps

@bramslob is exactly right. When you receive the callback, you’re outside of Angular. The following four lines are a tricky way to make a call back into your AngularJS code.

               //call back to web service in Angular.  
                var elem = angular.element(document.querySelector('[ng-app]'));
                var injector = elem.injector();
                var myService = injector.get('PushProcessingService');

This works for me because in my code I have a factory PushProcessingService with method registerID. This calls back to the notification server - the one which keeps track of everyone’s ID to send them to google.

Unfortunately the code on my blog is just a demonstration of methods - it’s not plug-and-play.

Thanks for all of your help. I have tried several times with your examples but it can´t work for me. This is my codepen: .

I took the ionic template and i only include the code example of @mmendelson. Is it correct? Because it doesn´t work.

Thank you

1 Like

+1 - has this been resolved?