Validation of an ID against a List which loads from the server

I have an usecase where a component contains a list of counties, and the scope of the component contains both the list of countries and the selected country ID: http://jsfiddle.net/qYdwR/1631/.

The ID is validated against the list, i.e. if the list of counties contains IDs in the range 1 - 4, the ID = 5 would be considered invalid. In my application, the list of counties is loaded from the server.

The ID can be changed in two ways:

1. when the user selects a value from the select list;
2. when the route contains the "countryid" parameter (..&countryid=3&...)

Everything works as expected, except the following scenario:

Starting from a new blank browser page, the user enters in the address bar, by hand, an URL with an valid countyid, for example http://...&countyid=3&... Countyid 3 is one of the valid IDs, as per the list of the counties received from the server. But because there is a delay until the list of the counties loads from the server, the validation fails with the message "countyid is not in the list". After the list of counties loads, if the user select the county with countyid = 3 from the list, the validation passes, as countyid 3 is in the list.