Angular Component w/o URL

I am fairly new to AngularJS (v 1.6) so this may be a dumb question.

I am trying to create a component that will be used on the home page of my application. No data will be passed to it, and instead I will make an API call.

Here is what it looks like thus far:

class MyInboxController {
    constructor(api) {
        this.api = api;
        this.$onInit = () => {
          this.count = this.api.getAllMessages().then(function(data) { data.length });
        }
    }
}

MyInboxController.$inject = ['api'];

export const myInboxComponent = {
    template: require('./my-inbox.html'),
    controller: MyInboxController
};

Essentially, this component will live on the home page of my application in the navigation. My problem is that when I call an api service I have in oninit, it never seems to get data back in time for the page to load. Any advice would be fantastic.

The code likely should be:

class MyInboxController {
    constructor(api) {
        this.api = api;
        this.$onInit = () => {
          api.getAllMessages().then( (data) => {
            this.count = data.length 
          });
        };
    }
}

The .then method of returns a promise. The value from a promise needs to be extracted with a function provided to the .then method.