title: Load html template after async http.get call is done
body: <p>I have routing config in my main app.js.</p>
  
  <pre><code>// app.js
  angular.module('myApp', ["ngRoute"])
  .config(['$routeProvider', function ($routeProvider) {
      $routeProvider.when('/', {
          templateUrl: '/templates/company-list.html',
          controller: 'CompanyListCtrl as companyListCtrl'
      }).when(...    
  </code></pre>
  
  <p>Although in the app.js I have a directive that renders an image as a background css element of the template's div.</p>
  
  <pre><code>/app.js 
  // Directives
  angular.module('myApp')
      .directive('backImg', function () {
          return function (scope, element, attrs) {
              var url = attrs.backImg;
              element.css({
                  'background-image': 'url(' + url + ')',
                  'background-size': 'cover'
              });
          };
      });
  </code></pre>
  
  <p>CompanyListCtrl controller dependent on an http Service that makes a call to a server and returns data. That data contains 'url' for the directive above.</p>
  
  <pre><code> //controllers.js
   angular.module('myApp')
          .controller('CompanyListCtrl', ['CompanyService', function (CompanyService) {
              var self = this;
              self.companies = [];
  
              CompanyService.getCompanies().then(function (response) {
                  self.companies = response.data;
              });
          }]);
  </code></pre>
  
  <p>My 'company-list.html' template with the directive renders before async data is returned. I guess I need to use 'resolve' in the route config however, what is the dependency should be there when $htt.get call is implemented as an external service?</p>