title: Angular - Wait $http finish until go to the next line
body: <p>It's a simple webshop. So I'd like to load several things before show the home page and the controller.</p>
  
  <p>I decided that the index.html will be also  the Master Page containing a header, the ui-view for routing templates , a sidebar containing the categories and a footer. </p>
  
  <pre><code>&lt;body ng-app="app"&gt;
      &lt;header ng-include="'./templates/masterPage/header.html'"&gt;&lt;/header&gt;
      &lt;div ui-view&gt;&lt;/div&gt;
      &lt;sidebar ng-include="'./templates/masterPage/sideBar.html'"&gt;&lt;/sidebar&gt;
      &lt;footer ng-include="'./templates/masterPage/footer.html'"&gt;&lt;/footer&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The things on header, sidebar and footer will came from a json file containgin everything I need such as categories, currency, name of the webshop and others things that's will never changes after load.</p>
  
  <p>So, I created the following app.js...</p>
  
  <pre><code>angular
  .module('app', [
      'ui.router'
  ])
  .config(['$urlRouterProvider', '$stateProvider',
      function ($urlRouterProvider, $stateProvider) {
          $urlRouterProvider.otherwise('/');
          $stateProvider
              .state('home', {
                  url: '/',
                  templateUrl: 'templates/common/home.html',
                  controller: 'homeCtrl',
              })
  }])
  .run(function ($rootScope, $http) {
      $rootScope.api = "http://127.0.0.1:5000/demoShop";
      var call = $rootScope.api + "/frontEnd/loadStructure";
      $rootScope.webshop = $http.get(call).then(function (response) {
          console.log('1');
          return response.data;
      });
      console.log("2");
  })
  </code></pre>
  
  <p>The problem is: check the console.logs in the end....2 executes before 1 because I can't make the $http to wait until go to the next line. How can I do it ?</p>
  
  <p>I need to populate the webshop variable on rootscope before do anything.</p>