Force javascript to execute function and its sub function

How can I execute the below code so that I can display each flavor and its each ITEM ID details in a sequence.

Format of execution :

Flavor1, Flavor2 -- Getflavors()

Flavor1

ITEM1,ITEM2... -- GetItemIDs_ofeachFlavor(MapFlvID)

GET ITEM1 DETAILS and add it to Content - GetItemID_Details(ITEM_ID, FLAVOR_ID)

GET ITEM2 DETAILS and add it to Content - GetItemID_Details(ITEM_ID, FLAVOR_ID)

Flavor2

ITEM1,ITEM2... -- GetItemIDs_ofeachFlavor(MapFlvID)

GET ITEM1 DETAILS and add it to Content -- GetItemID_Details(ITEM_ID, FLAVOR_ID)

GET ITEM2 DETAILS and add it to Content -- GetItemID_Details(ITEM_ID, FLAVOR_ID)

....

DISPLAY Content

Code:

I've seen some post are suggesting callback() and promise() but not sure how to use them in subfunction

Getflavors() {

getFlavors().then(function () // API call will get flavors

Flavors = $scope.Flavors; //

Flavors.map(function (element) {

GetItemIDs_ofeachFlavor(element);

}

})

}

function GetItemIDs_ofeachFlavor(MapFlvID) {

getItemIDs_ofeachFlavor(MapFlvID).then(function () { // API call will get ITEMID's of a each flavor

ItemIDsofeachflavor = $scope.ItemIDsofeachflavor;

GetItemID_Details(ITEM_ID, FLAVOR_ID);

})

}

function GetItemID_Details(ITEM_ID, FLAVOR_ID) {

getItemDetails(ITEM_ID, FLAVOR_ID).then(function () { // API call will get each ITEM ID details

ItemDtls = $scope.ItemDetails;

Content = '';

Content += '

...ItemDtls.ITEMNAME'; ...; ......;

})

}