javascript - Promises not working for IndexedDB in angularjs -

i have app using indexeddb. made prolific use of callbacks, , decided clean using angularjs promises $q.

fail.

http://jsfiddle.net/ed4becky/bumm337e/

angular.module("idbtest", []);  angular.module("idbtest") .service("initsvc", ['$q', function ($q) { var svc = this; svc.dbversion = 1; svc.open = open; svc.deletedb = deletedb; var idb = window.indexeddb;  function deletedb() {     return $q(function (resolve, reject) {         idb.webkitgetdatabasenames().onsuccess =              function (sender, args) {             if (sender.target.result                  && sender.target.result.length > 0) {                 var db = sender.target.result[0];                 console.log("deleting " + db);                 var request = idb.deletedatabase(db);                 request.onsuccess = function () {                     console.log('database ' + db + ' deleted.');                     resolve();                 };                 request.onerror = function () {                     reject();                 };             } else {                 console.log("nothing delete");                 resolve();             };         };     }); }  function open(dbname) {     return $q(function (resolve, reject) {         var request = idb.open(dbname, svc.dbversion);         request.onupgradeneeded = function (e) {             var db = e.target.result;             console.log("creating new " + db.name);             e.target.transaction.onerror = function (e) {                 console.log(e);             };             db.createobjectstore("table1", {                 keypath: "id"             });             db.createobjectstore("table2", {                 keypath: "id"             });             db.createobjectstore("table3", {                 keypath: "id"             });         };          request.onsuccess = function (e) {             console.log('database ' + dbname + ' open.');             svc.db = e.target.result;             resolve();         };          request.onerror = function () {             reject();         };      }); } }]);  angular.module('idbtest') .factory('$exceptionhandler', ['$log', function ($log) { return function (exception, cause) {     throw exception; };  }]);  angular.module('idbtest') .run(['initsvc', function (initsvc) { initsvc.deletedb()     .then(initsvc.open('testdatabase'))     .then(function () {         console.log(initsvc.db.name + ' initialized');     }); }]); 

this fiddle shows expectation that

1. any databases created deleted. then
2. a database open triggering onupgradeneeded then
3. the database referenced

unfortunately then statments seem called before promises resolved in onsuccess methods of idb calls.

to recreate, run jsfiddle console open. may have run couple times exception, fails times, because last clause called before onsuccess on database open called.

any ideas?

i believe issue promise chain. documentation angular bit confusing, seems though if return value of callback method promise, resolve value; not promise. thus, breaking chain.

from angular promise 'then' method documentation:

then(successcallback, errorcallback, notifycallback) – regardless of when promise or resolved or rejected, calls 1 of success or error callbacks asynchronously result available. callbacks called single argument: result or rejection reason. additionally, notify callback may called 0 or more times provide progress indication, before promise resolved or rejected.

this method returns new promise resolved or rejected via return value of successcallback, errorcallback (unless value promise, in case resolved value resolved in promise using promise chaining). notifies via return value of notifycallback method. promise cannot resolved or rejected notifycallback method.

i'm able initialize this:

angular.module('idbtest')     .run(['initsvc', function (initsvc) {     initsvc.deletedb()         .then(function() {             return initsvc.open('testdatabase');         })         .then(function () {             console.log(initsvc.db.name + ' initialized');         }); }]);