Angular Service works in browser but not in emulator or native device

1

Hey All,

So I made a Toast service for showing messages in my Ionic App. It fires just fine when testing in the browser, but on the emulator or on a native device, it does not fire. I’ve also run the emulator debugger in safari, and the console has no errors. It just does nothing. Take a look at my code:

services.js:

.service('Toast', function($timeout, $rootScope) {
  return {

success: function(toastMsg) {
  if ($rootScope.toastShowing === false) {
    console.log('toasting!');
    $rootScope.toastShowing = true;
    angular.element(document.querySelector('body')).append( "<div class='toast green animated fadeInUp'>" + "<span class='icon ion-checkmark-circled'></span>" + "<span class='toastmsg'>"+ toastMsg + "</span>" + "</div>" );
    $timeout(function() {
      angular.element(document.querySelector('.toast')).attr({class: "toast green animated fadeOutDown"});
      $timeout(function() {
        angular.element(document.querySelector('.toast')).remove();
        $rootScope.toastShowing = false;
      }, 400);
    }, 3000);
  }
},

And in my Homepage test controller:

I’m injecting ‘Toast’

.controller('HomeCtrl', function($scope, $rootScope, $ionicLoading,  $timeout, $state, $ionicModal, Toast) {

And calling

Toast.success('test toast');

I’ve also tried wrapping it in a scope and calling it on a click

$scope.fireToast = function() {
    Toast.success('test toast');
];

Again, works every time in the browser, just not on native emulator. Any ideas?