I am working on an app which part of it is based on mvc razor and vanilla javascript and some part of it is an angular app. I need to pass some json data generated from an script in head of the page to the body part which is an angular app. The format is something like this:

**CODE:**

```
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="/js/build/bundles/sharedStyles.css" />
        <link rel="stylesheet" type="text/css" href="/js/build/bundles/staticStyles.css" />
        <script>
            *** (In this script I am calling an api asyncly to get some config and bootstrap the angular app with this config)
        </script>
    </head>
    <body>
        <test-app></test-app>
        <script src="/js/build/bundles/allScripts.js" type="text/javascript </script>
</body>
</html>

```

In the code snippet above, I need to pass the result of the api async call to the angular app, what would be the best approach to do so? I know that angular has a concept of app initializer like this:

```
provide: APP_INITIALIZER, useFactory: DataFactory, multi: true, deps: [dataService] }

```

but still I am very lost on how pass something from head to body and make angular app wait for that value to be fetched completely in some sort of promise before it starts bootstrapping. Any help or code example would be appreciated