JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app" ng-controller="MainCtrl">
    <button ng-click="runAsync()">Run Async</button>
    <div ng-repeat="line in outputLines">{{line}}</div>
</div>

JavaScript

angular.module('app', [])
    .controller('MainCtrl', function($scope, $q, $timeout) {
        $scope.outputLines = [];
        
        $scope.runAsync = function(new_title) {
            var asyncFn1 = function(data){
                var deferred = $q.defer();
                
                $timeout(function(){
                    console.log("Async fn1 " + data);
                    $scope.outputLines.push("Async fn1 " + data);
                    deferred.resolve("Async fn1 " + data);
                },1000);
                
                return deferred.promise;
            }
            
            var asyncFn2 = function(data){
                var deferred = $q.defer();
                
                $timeout(function(){
                    console.log("Async fn2 " + data);
                    $scope.outputLines.push("Async fn2 " + data);
                    deferred.resolve("Async fn2 " + data);
                },1000);
                
                return deferred.promise;
            }
            
            asyncFn1(1)
            .then(function(data){asyncFn2(data);})
            .then(function(data){asyncFn2(data);})
            .then(function(data){asyncFn2(data);});
        }
    });