【angular.js】 thenでつないでも直列処理にならない

関数をthenで実行すると非同期で動くため思ったような処理にならないことがありました。

超適当に書きますがこんな感じ。

$scope.process = function() {
    //$scope.a()は別のjsで定義
    var promise = $scope.a();
    promise.then(function(value) {
        var promiseb =  $scope.b();
        promise.then(function() {
            //なんか処理
        });
    });
}

$scope.b = function() {
    setTimeout(function() {
      $.ajax({
          url: 'http://testurl.com/api/test.php'
      }).then(
         data => $('#results').append(data),
         error => alert('読み込み失敗')
      );
    });
}

//別のjsファイルに定義
$scope.a = function(){
  //apiはフレームワークで用意されたオブジェクト
  return api.then(function(value) {
     //何か処理
  }
}

$scope.processを実行すると以下のような処理順になると思ってました。
1. $scope.aを実行
2. $scope.bを実行

現実は
1. $scope.bを実行
2. $scope.aを実行
3. $scope.bを実行

わけわからん…。
じゃあthenでつなげばいいのか？ということで以下にしてみました。

$scope.process = function() {
    //$scope.a()は別のjsで定義
    var promise = $scope.a();
    var promiseb =  $scope.b();
    promise.then(promiseb);

}

$scope.b = function() {
    setTimeout(function() {
      $.ajax({
          url: 'http://testurl.com/api/test.php'
      }).then(
         data => $('#results').append(data),
         error => alert('読み込み失敗')
      );
    });
}

//別のjsファイルに定義
$scope.a = function(){
  //apiはフレームワークで用意されたオブジェクト
  return api.then(function(value) {
     //何か処理
  }
}

さあ直ったかと$scope.process実行。

1. $scope.bを実行
2. $scope.aを実行
3. $scope.bを実行

簡便してくれ…。
他にはということで探しましたがasyncで定義した関数内でawaitでも直列処理がいけるとあり以下修正。

$scope.process = async function() {
    var promise = await $scope.a();
    var promiseb = await $scope.b();

}

$scope.b = function() {
    setTimeout(function() {
      $.ajax({
          url: 'http://testurl.com/api/test.php'
      }).then(
         data => $('#results').append(data),
         error => alert('読み込み失敗')
      );
    });
}

//別のjsファイルに定義
$scope.a = function(){
  //apiはフレームワークで用意されたオブジェクト
  return api.then(function(value) {
     //何か処理
  }
}​

$scope.process実行。

1. $scope.aを実行
2. $scope.bを実行

というわけで希望通りの順序で実行されました。

明確な理由は未だに分かってませんが別のjsに定義しているのが問題？
とりあえずawaitをつければ完全に関数の処理が終了するまで次の処理は実行されないので良しとするか…。

対応としては間違ってないけどちょっとモヤモヤが残りますね。

asyncの説明は以下ご参考。

async function - JavaScript | MDN

async/await 入門（JavaScript） - Qiita