# When are the angular controller's loaded?

**URL:** <https://forum.ionicframework.com/t/when-are-the-angular-controllers-loaded/239>\
**Category:** ionic-v1\
**Created:** [December 12, 2013, 9:07pm UTC](https://forum.ionicframework.com/t/when-are-the-angular-controllers-loaded/239 "2013-12-12T21:07:35Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![seanhill](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/seanhill/32/105765_2.png) [@seanhill](https://forum.ionicframework.com/u/seanhill)\
**Post date:** [December 12, 2013, 9:07pm UTC](https://forum.ionicframework.com/t/when-are-the-angular-controllers-loaded/239/1 "2013-12-12T21:07:35Z")

</div>

I was wondering if the angular controllers are loaded before or after the “deviceready” event fired off by Cordova. I did a test by putting a

```
console.log("App ctrl loaded");

```

Inside of my most parent AppCtrl, and then

```
document.addEventListener('deviceready', function() {
    console.log("Device ready");
});

```

Right before the end body tag of the HTML.

In my device’s system log using the console plugin. I got the “Device Ready” log, but no “App Ctrl Loaded”. I assumed then that the controllers are loaded before cordova is actually ready. Is this assumption correct?

---

<div class="post-metadata">

**Author:** ![max](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/max/32/137761_2.png) [@max](https://forum.ionicframework.com/u/max)\
**Post date:** [December 16, 2013, 5:55pm UTC](https://forum.ionicframework.com/t/when-are-the-angular-controllers-loaded/239/2 "2013-12-16T17:55:55Z")

</div>

Hey @seanhill. There isn’t necessarily a connection between controller load time and deviceready firing. That event comes from the Cordova internals, and if you set the listener too late, the event will have already fired and you’ll miss it.

To deal with this, we’ve given you the `Platform` service, which you can use to always call a function when the device is ready (or after if it’s already been loaded):

```auto
controller('MyCtrl', function($scope, Platform) {
  Platform.ready(function() {
    // Platform stuff here.
  });
});

```

---

<div class="post-metadata">

**Author:** ![harold](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/harold/32/64116_2.png) [@harold](https://forum.ionicframework.com/u/harold)\
**Post date:** [January 23, 2014, 6:48am UTC](https://forum.ionicframework.com/t/when-are-the-angular-controllers-loaded/239/3 "2014-01-23T06:48:49Z")

</div>

```
    controller('MyCtrl', function($scope, $ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Platform stuff here.
  });
});

```

For me…

---

<div class="post-metadata">

**Author:** ![biapar](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/biapar/32/64378_2.png) [@biapar](https://forum.ionicframework.com/u/biapar)\
**Post date:** [June 18, 2014, 10:14pm UTC](https://forum.ionicframework.com/t/when-are-the-angular-controllers-loaded/239/4 "2014-06-18T22:14:02Z")

</div>

So, Is it right to write this into a factory?

```
 $ionicPlatform.ready(function() {
getLocation: function() {
      var q = $q.defer();

      navigator.geolocation.getCurrentPosition(function(position) {
        q.resolve(position);
      }, function(error) {
        q.reject(error);
        console.log("Errore posizione " + error.code + "-" + error.message );
      });
   

      return q.promise;
    }
  });
```

---

<div class="post-metadata">

**Author:** ![loicknuchel](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/loicknuchel/32/64528_2.png) [@loicknuchel](https://forum.ionicframework.com/u/loicknuchel)\
**Post date:** [August 17, 2014, 9:07am UTC](https://forum.ionicframework.com/t/when-are-the-angular-controllers-loaded/239/5 "2014-08-17T09:07:26Z")

</div>

Hi !

I have to wait for plugins to load in most of my controllers and it’s pretty painful to write

```auto
$ionicPlatform.ready(function() {
  // Platform stuff here.
});

```

for every controller using a plugin (and it could ends with some race conditions…).

Is there a way to globally wait for the ready before loading the angular app ?

Thanks

---

<div class="post-metadata">

**Author:** ![ngbit](https://avatars.discourse-cdn.com/v4/letter/n/35a633/32.png) [@ngbit](https://forum.ionicframework.com/u/ngbit)\
**Post date:** [September 30, 2014, 6:37am UTC](https://forum.ionicframework.com/t/when-are-the-angular-controllers-loaded/239/6 "2014-09-30T06:37:11Z")

</div>

You have to bootsrap AngularJS by yourself.  
First remove the ng-app directive from your index.html. Then attach an event listener to your document ready and deviceready event. After that two events are fired you can bootstrap angular manually:

```
var ngDocument = angular.element(document);

angular.element(ngDocument).ready(function() {
    ngDocument.on('deviceready', function() {
      var body = ngDocument.find('body');
      angular.bootstrap(body, ['myApp']);
    });
});

var myApp = angular.module('myApp', []);

```

If you make it like this it is guaranteed that all cordova plugins are loaded **before** Angular initializes his services, controllers and so on.

---

<div class="post-metadata">

**Author:** ![loicknuchel](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/loicknuchel/32/64528_2.png) [@loicknuchel](https://forum.ionicframework.com/u/loicknuchel)\
**Post date:** [September 30, 2014, 8:37am UTC](https://forum.ionicframework.com/t/when-are-the-angular-controllers-loaded/239/7 "2014-09-30T08:37:20Z")

</div>

You’re right.  
But this slows down all your app event if you don’t need plugins…

I opted for a different solution : for each plugin I create a service which is responsible to wait for the ready using promises…

---

<div class="post-metadata">

**Author:** ![ngbit](https://avatars.discourse-cdn.com/v4/letter/n/35a633/32.png) [@ngbit](https://forum.ionicframework.com/u/ngbit)\
**Post date:** [September 30, 2014, 9:58am UTC](https://forum.ionicframework.com/t/when-are-the-angular-controllers-loaded/239/8 "2014-09-30T09:58:21Z")

</div>

That’s also a good solution 🙂

---

<div class="post-metadata">

**Author:** ![kbenoit](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/kbenoit/32/66655_2.png) [@kbenoit](https://forum.ionicframework.com/u/kbenoit)\
**Post date:** [October 15, 2014, 5:31pm UTC](https://forum.ionicframework.com/t/when-are-the-angular-controllers-loaded/239/9 "2014-10-15T17:31:48Z")

</div>

I do like ngbit, but the following code is reusable and let you try the app in a browser by bootstrapping anyway if cordova is not present.

```
var CordovaInit = function(appModule) {

    var onDeviceReady = function() {
        receivedEvent('deviceready');
    };

    var receivedEvent = function(event) {
        console.debug('Start event received, bootstrapping application setup.');
        var body = document.getElementsByTagName("body")[0];
        angular.bootstrap(body, [appModule]);
    };

    this.bindEvents = function() {
        document.addEventListener('deviceready', onDeviceReady, false);
    };

    //If cordova is present, wait for it to initialize, otherwise just try to
    //bootstrap the application.
    if (window.cordova !== undefined) {
        console.debug('Cordova found, waiting for device.');
        this.bindEvents();
    } else {
        console.debug('Cordova not found, booting application');
        receivedEvent('manual')
    }
};

```

Then in your index.html just add:

```
<script>new CordovaInit('myApp');</script>

```

I found that on the internet, most likely here: [https://gist.github.com/nick-pww/9626837](https://gist.github.com/nick-pww/9626837)

---

<div class="post-metadata">

**Author:** ![Sahotataran](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sahotataran/32/85284_2.png) [@Sahotataran](https://forum.ionicframework.com/u/Sahotataran)\
**Post date:** [May 14, 2015, 6:34pm UTC](https://forum.ionicframework.com/t/when-are-the-angular-controllers-loaded/239/10 "2015-05-14T18:34:46Z")

</div>

Hi

can you provide an example how u achieved it?

---

<div class="post-metadata">

**Author:** ![farcontr](https://avatars.discourse-cdn.com/v4/letter/f/8c91f0/32.png) [@farcontr](https://forum.ionicframework.com/u/farcontr)\
**Post date:** [May 10, 2018, 11:58am UTC](https://forum.ionicframework.com/t/when-are-the-angular-controllers-loaded/239/11 "2018-05-10T11:58:31Z")

</div>

I’ve been looking for this since morning!  
The select queries of sqlite database did not come to the page using ng-init. because the page was loading first did not see the database. I used this code to run the platform ready before the controller so the database was open.