javascript - Return a promise of a promise -

i'm quite new angular, i'm trying find out things.

i have method returns promise:

preloaderserviceobject.load = function(referencepaths){     var deferred = $q.defer();      $(referencepaths).each(function(index, referencepath) {         var preloadedelement = document.createelement('img');         {             preloadedelement.onload = deferred.resolve;             preloadedelement.src = referencepath;         }     });      return deferred.promise; } 

this working fine , doesn't cause problem. however, have method should return promise inside completion call of promise, so:

officeuiribboncontrolserviceobject.initialize = function(configurationfile) {     $http.get(configurationfile)         .then(function (response) {             $rootscope.tabs = response.data.tabs;             $rootscope.contextualgroups = response.data.contextualgroups;              var images = jspath.apply('.groups.areas.actions.resource', $rootscope.tabs);             images.concat(jspath.apply('.tabs.groups.areas.actions.resource', $rootscope.contextualgroups));              preloaderservice.load(images);         }); } 

the last line preloaderservice.load(images); return promise defined in first function in post.

but, want call method `officeuiribboncontrolserviceobject.initialize', how should change method can wait until loading of preloaderservice has been completed?

just changing method return promise not work, because returned object undefined (since i'm in then method of $http.

kind regards,

edit: suggested rouby, using promise:

the initialize function:

officeuiribboncontrolserviceobject.initialize = function(configurationfile) {     $http.get(configurationfile)         .then(function (response) {             $rootscope.tabs = response.data.tabs;             $rootscope.contextualgroups = response.data.contextualgroups;              var images = jspath.apply('.groups.areas.actions.resource', $rootscope.tabs);             images.concat(jspath.apply('.tabs.groups.areas.actions.resource', $rootscope.contextualgroups));              var deferred = $q.defer();             preloaderservice.load(images).then(function() {                 deferred.resolve();             });              return deferred;         }); } 

the initializeservice method:

function initializeservice(serviceinstance, configurationfile) {     serviceinstance.initialize(configurationfile).then(function() {         console.log('this method has been called.');     }); } 

the result of get: error: serviceinstance.initialize(...) undefined

create new deferred in .initialize gets resolved when second .load finishes, can return deferred normal.

e.g.

preloaderservice.load(images).then(function(){ newdeferred.resolve(); }, function(){ newdeferred.reject(); });