title: Where is the recommended place to use $http.get
body: <p>I am playing around with angularjs and have the following HTML:-</p>
  
  <pre><code>   &lt;div ng-app="App"&gt;
        &lt;div ng-controller="AppCtrl"&gt;
           &lt;products&gt;&lt;/products&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>and my js looks like this:-</p>
  
  <pre><code>var app = angular.module('App', []);
  
  app.controller("AppCtrl", function($scope, $http) {
     $http.get('/api/products')
        .then(function(res) {
           $scope.products = res.data;
     });
  });
  
  app.directive("products", function () {
     return {
        restrict: "E",
        template: "&lt;h1&gt;Products&lt;/h1&gt;&lt;ul&gt;&lt;li ng-repeat='product in products'&gt;{{product.Name}} - &lt;em&gt;{{product.Category}}&lt;/em&gt;&lt;/li&gt;&lt;/ul&gt;",
     };
  });
  </code></pre>
  
  <p>This works really well but I am unsure how the directive knows that the controller has loaded the data before the template renders the results. So my question is:-</p>
  
  <p>Is the recommended way to use a <code>$http.get</code> in this scenario (explanation would be nice) or if not then what is the recommended way?</p>