Controllers, directives and templates

HTML

  <div ng-app="App">
      <div ng-controller="AppCtrl">
         <products></products>
      </div>
   </div>

JS

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",
      templateUrl: "/templates/products.html",
   };
});

Template

<h1>Products from template</h1>
<ul>
   <li ng-repeat='product in products'>{{product.Name}} - <em>{{product.Category}}</em></li>
</ul>