Angular js promises chaining

Question

Ive been trying to figure out promises for the last two days and i gotten this so far. Any guided direction would be great as i think i confused my self.

So this is my service, it has to run in order with a timeout after image capture for the server to update:

returnImage: function() {
      var results = {};
   function getCameraDirectory(){
     // Get directory infomation from camera
     var list = [];
     deferred = $q.defer();
     console.log("getCameraDirectory");
     $http.get(BASE_URL + IMAGE_URL).then(
     function(response){
       $("<div>").html(response.data).find('a').each(function() {
         var text = $(this).text();
         if(text !== 'Remove'){
         list.push(text);
       }
       });
        if(results.hasOwnProperty("medialist")){
          results["filelist"] = list.diff(results["medialist"]);
        }else{
          results["medialist"] = list;
        }
        deferred.resolve('getCameraDirectory')
     },
     function(error){
       console.log(error);
        deferred.reject(error);
     });
   }

   function setCameraMode(){
     // sets the camera mode to picture, multi-image, video
     deferred = $q.defer();
     console.log("setCameraMode")
     $http.get(BASE_URL + '?custom=1&cmd=3001&par=0').then(
     function(response){
       if(response.status === 200){
        results["mode"] = 'image';
       deferred.resolve('setCameraMode');
     }else{
       deferred.reject("Counldnt change Camera mode");
     }
     },
     function(error){
       console.log(error);
        deferred.reject(error);
     });
   }

   function captureMedia(){
     // starts the capture process picture, multi-image, video
     console.log("captureMedia")
      deferred = $q.defer();
     $http.get(BASE_URL + '?custom=1&cmd=1001').then(
     function(response){
       if(response.status === 200){
        results["date"] = Date.now();
       deferred.resolve('captureMedia');
     }else{
       deferred.reject("Counldnt insiate image capture");
     }
     },
     function(error){
       console.log("error");
        deferred.reject(error);
     });
   }

   function saveMedia(){
     console.log('saveMedia');
     deferred = $q.defer();
     console.log(results["filelist"]);
     var mediaName = results["filelist"];
     var url = BASE_URL + IMAGE_URL + mediaName;
     var targetPath = cordova.file.externalRootDirectory + 'photoboothinabox/' + mediaName;
     var filename = targetPath.split("/").pop();
     $cordovaFileTransfer.download(url, targetPath, {}, true).then(function (response) {
         deferred.resolve('saveMedia');
         console.log('Success');
     }, function (error) {
         deferred.reject("Counldnt save to disk");
         console.log('Error');
     }, function (progress) {
         // PROGRESS HANDLING GOES HERE
         console.log(progress)
     });
   }
   function test(){
     console.log("past it")
   }

    var deferred= $q.defer(),
    promise = deferred.promise;

      promise.then(getCameraDirectory())
            .then(setCameraMode())
            .then(captureMedia())
            .then(getCameraDirectory())
            .then(saveMedia());
  return promise;

},

It just goes all over the place...

P.S. I work construction for a living

Answer 1

$http is already returning a promise, so there is no need to use $q.defer() when calling a service. Instead, I would recommend placing all your $http request in a separate service/service:

app.factory('DataService', function($http, $cordovaFileTransfer) {
  var getCameraDirectory = function() {
    return $http.json("/api/...") // returns a promise
  };

 var setCameraMode= function() {
    return $http.json("/api/...") 
  };

 var getCameraDirectory = function() {
    return $http.json("/api/...") 
  };

 var captureMedia = function() {
    return $http.json("/api/...") 
  };

 var saveMedia = function() {
    return  $cordovaFileTransfer.download(url, targetPath, options, trustHosts) // I am not sure, but I am assuming that $cordovaFileTransfer.download() is returning a promise. 
  };

  return {
    getCameraDirectory: getCameraDirectory,
    setCameraMode: setCameraMode,
    captureMedia: captureMedia,
    saveMedia: saveMedia
  }
});

In your controller, you can now resolve your promises using then

myApp.controller('MyController', function ($scope, DataService) {     
    DataService.getCameraDirectory().then(
      function(){ //resolve getCameraDirectory 
        // getCameraDirectory successcallback
      },
      function(){
        // getCameraDirectory errorcallback
      }).then( // resolve setCameraMode 
        function(){
          // setCameraMode successcallback
        },
        function(){
          // setCameraMode errorcallback
        }).then( // resolve captureMedia 
          function(){
            // captureMedia successcallback
          },
          function(){
            // captureMedia errorcallback
          }).then(// resolve saveMedia
            function(){
              // saveMedia successcallback
            },
            function(){
              // saveMedia errorcallback
            })   
});

Note that I have not actually implemented the above code, but should provide you with an outline.