Promise resolution with ionic / ui routing

I am having trouble figuring out why my promise is not resolving as I expect. I am using Ionic / ui-routing.

my service:

return {
    all: function () {
        $localForage.getItem('foo').then(function (bar) {
            return bar;


When I write data to the console, I see the objects that localForage returns from indexeddb.

my apps.js:

.state('', {
    url: '/foo',
    views: {
        'tab-foo': {
            templateUrl: 'templates/tab-foo.html',
            controller: 'fooCtrl as foo'
    resolve: {
        getData: function (Service) {
            return Service.all();


In my controller foo: = getData;


When I do this, foo in the controller is undefined, any ideas why? When loggig to console I see that the service is being called by apps.js I can see that it is allowed because I can see the data in the console. Using ui-router I would expect it not to load view / controller until everything is resolved.

I used the following as inspiration: only without $ q service.


source to share

1 answer

There is a working working example . Since the controller will be available as foo, we have to do it like this:

Assigning a controller to some property myData

.controller('fooCtrl', function($scope, getData) {
  this.myData = getData;


The template call will contain both the controller (foo) and its myData property p>

resolved stuff:
<pre>{{foo.myData | json}}</pre>


Check here



All Articles