initialize directive in angular app only after data is loaded via $http

Question

I have a basic angular application that I need to do the following:

1. App controller is initialized
2. $http call happens and returns a resolved promise once call to server is completed. Result is stored in scope variable. (this can happen before any other actions on page)
3. Directive is initialized with the data from the scope variable of previous step.

The directive in question wraps a non-angular Jquery library (galleria.io) and it is crucial to initialize it only after data is obtained. Otherwise, it has to be first initialized with some dummy data and show to viewer some screen "garbage".

Answer 1

You should add the HTTP call to a factory, exposing the function, and call this function in the route to this view/controller. This will ensure the promise is resolved before ever loading the view or controller, and its results will be injected into the controller.

See this post for an example: https://stackoverflow.com/a/27239390/1913396