AngularJs - make several service calls simultaneously?

Question

I have a very large search form that contains, among other fields, 8 select controls which must be populated from web services. I'm struggling a bit with how to best accomplish this using AngularJs. Do I call one, and put the next in the 'then' clause, and then ext in that 'then' clause, and so on? Just looking at that makes me think there must be a better, well-formed method of doing this that I'm just missing because I'm new with Angular...

To illustrate the issue, I have the following HTML (part of the entire form):

<div class="row">
    <div class="col-md-12">
        <div class="col-md-2">
            <label for="ddlRace">Race</label>
            <select id="ddlRace" class="form-control"></select>
        </div>
        <div class="col-md-2">
            <label for="ddlHairColor">Hair Color</label>
            <select id="ddlHairColor" class="form-control">
            </select>
        </div>
        <div class="col-md-2">
            <label for="ddlEyeColor">Eye Color</label>
            <select id="ddlEyeColor" class="form-control">
            </select>
        </div>
        <div class="col-md-2">
            <input type="text" id="tbHeight" class="form-control">
        </div>
        <div class="col-md-2">
            <input type="text" id="tbWeight" class="form-control">
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-3">
        <label for="tbStreetNumber">House Number</label>
        <input type="text" id="tbStreetNumber" class="form-control">
    </div>
    <div class="col-md-2">
        <label for="ddlStreetPrefix">Prefix</label>
        <select id="ddlStreetPrefix" class="form-control">
            <option value="">Prefix</option>
        </select>
    </div>
    <div class="col-md-5">
        <label for="tbStreetName">Street Name</label>
        <input type="text" id="tbStreetName" class="form-control">
    </div>
    <div class="col-md-2">
        <label for="ddlStreetSuffix">Suffix</label>
        <select id="ddlStreetSuffix" class="form-control">
            <option value="">Suffix</option>
        </select>
    </div>
</div>

I have to populate the Race, Hair colors, Eye colors, Street prefix and Street suffix from service calls. I have a factory setup with calls for each of those, but I need to run all of them when the form initially loads so I can populate the fields. So what is the best method of doing this using the deferred/promise API?

Answer 1

Call each promise, one after the other without chaining them together with 'then' clauses. Otherwise, if you do they will run serially - which is not what you want.

Use $q.all to register a success/error callback when all promises are resolved or if something goes wrong:

var p1 = promise1();
var p2 = promise2();
var p3 = promise3();

$q.all([p1, p2, p3])
       .then(
             function() { /*success*/ },
             function() { /*error */ }
        );