How to NOT do a nested promise

BadPromise.js

someFunction() {

  // do some stuff

  MyService.doSomething().then(() => {

    // do some stuff
    
    AnotherService.doSomethingElse().then((blah) => {
      // do something with blah
    })
    .catch(...)
    .finally(...)
    
    // do some more stuff
  })
  .catch(...)
  .finally(...);
}

GoodPromise.js

angular.module('app.services', [])
  .service('MyService', MyService);
  
function MyService($q, $http) {
  
  this.getSomething = function() {
    return $http.get('foo');  // this natively returns a promise
  }
  
  var cache = [];
  this.getSomethingElse = function(id) {
    
    return $q(resolve, reject) {
      if (/* id in cache */) {
        var item = cache[0]; // or wherever it's at in the cache
        resolve(item);
      }
      else {
        /* fetch item from somewhere */
        var item = "foo";
        resolve(item);
      }
      
      // if an error happens and you can trap it
      var error = "some error";
      reject(error);
    }
  }
}
MyService.$inject = ['$q', '$http'];

someFunction() {

  // do some stuff

  MyService.doSomething().then(() => {

    // do some stuff

    return AnotherService.doSomethingElse()
  })
  .then((...) => {
    // process result from AnotherService.doSomethingElse()
  })
  .catch(...)
  .finally(...);
}