How can I defer view rendering until some data is loaded from an external source?

Question

My app needs to load some data into the $rootScope from an external source when it initializes. Since the data is from an external source, the time required to load the data is not guaranteed. I want to defer the rendering of the view until only after the data is loaded successfully. Is there a way to achieve this?

Note that I am not using the Angular routing for this app.

Here is a simplified demo

Answer 1

There isn't a clean way to prevent the view from rendering until an async operation completes without using route resolves, but you could program a custom directive to do the same work.

However, if this is strictly for user experience, then using ngShow would work swimmingly:

<div ng-show="user.name">
  <!-- content won't be visible until data is set -->
</div>

Here's an updated Plunker: http://plnkr.co/edit/MXoQNWHvyp9aOXg0QOoC?p=preview