Initialization fails when asynchronous load is slow #36
Description
Description
In the scenario where the list is asynchronously loaded, and this loading takes 'too long', the dropdown will stay empty.
What seems to happen is this:
During pageload the dropdown gets initialized with the (still empty) html select list. When the dropdown items eventually arrive from the server, we'll populate the list on the Angular viewmodel, which in turn modifies the (hidden) html select list options. However, this change is not picked up by the Chosen dropdown.
Work-around (sort of)
A manual refresh after populating the Angular viewmodel works:
setTimeout(function() { $('#dropdown').trigger('chosen:updated'); }, 50);
...but this goes against the Angular model driven design. You would need to insert view-specific code into the controller which is ugly. On top of that, an artificial delay is needed in order to allow Angular apply the viewmodel changes to the DOM.
Reproduction
This can be easily reproduced on your own example page when using Google Chrome with network throttling enabled in the Developer Tools (eg. use the "Regular 2G" profile). Refresh the page, and all dropdowns will stay empty.