can not call apis multiple time from the front-end

Ok, ignore the other response, the admins should delete it shortly

So, the way that I see how to do this is:

Let's say you have a JSON variable elementStates that has the value [].

You can now add a string variable that will contain the API call to make. Put it's value to "undefined", so that there is no API call that is made when the page starts.

Now, you can add a variable "ctrl" that will check for changes in the elementStates variable:

It's value will be something like this:

// some condition to check, here I'm checking if elementStates contains "getProfileList"

if ($data.elementStates.includes("getProfileList")) {

    // remove the item from the array so that it gets executed only once

    const index = $data.elementStates.indexOf("getProfileList");

    $data.elementStates.splice(index, 1);



    $data.apiCallToMake = "../API/portal/profile?c=10&p=0";

}

Afterwards, what remains to be done is to use the string variable (the apiCallToMake variable) in an external API variable.
So, the value will be something like this: "{{apiCallToMake}}".
Now, every time you will have "getProfileList" that will be added to the elementStates variable, you will have an API call that will be made to get the list of profiles.

For the second part, where you want to check the data, you can add another if to the "ctrl" variable to check the API call response.

Hope this helps.

I'm having a small problem understanding why you would want to render the page after all the promises have been resolved. Usually, if I understand promises well, you treat the response of the promises when they come using ".then()" for a single promise or "Promise.all().then()" for multiple promises. I would let the page render before and then treat the promises as they come.
If you need to not show anything while the page is loading the data, I would show a loader while the page is not loaded completely (by using a variable).

Hello again. So, I looked at it and there are two ways that I see how to do it.
The first way is a dirty way (that I don't recommend, but it gets the job done fast):
You can create a javascript file asset and import it into the UID with the following code

function applyScope() {

    angular.element(document.getElementsByTagName('body')[0]).scope().$apply();

}

This will trigger the angularjs calculations when you will call the function. It is fine, but again, I don't recommend it because it's dirty since it's going around the calculations of angular. You can find more about why it's a bad idea to use scope.apply on the internet.

Now, for the second option that I do recommend (but which requires a bit more work). Rest API extensions. This will let you create a custom Rest API, which you will be able to call in the UID page pretty easily.