title: Angular component won't display
body: <p>I have piece of html I want to show as a component, as I'm not manipulating the DOM.</p>
  
  <p>As a directive it works fine, but as a component it doesn't. I have made components before with no problem, just can't see what the issue is here.
  If I comment in the component code, and the directive out, it doesn't work.</p>
  
  <p>Any idea what I've done wrong?</p>
  
  <pre><code>(function() {
  "use strict";
  
  angular
      .module('x.y.z')
  
  
      // .component('triangularStatus', {
      //     bindings: {
      //         value: '=',
      //         dimension: '=?'
      //     },
      //     templateUrl: '/path/to/triangular-status.html',
      //     controller: TriangularStatusController,
      //     controllerAs: 'vm'
      // });
  
  
      .directive('triangularStatus', triangularStatus);
  
      function triangularStatus() {
          var directive = {
              scope: {
                  value: '=',
                  dimension: '=?'
              },
              replace: true,
              templateUrl: '/path/to/triangular-status.html',
              controller: TriangularStatusController,
              controllerAs: 'vm',
          };
          return directive;
      }
  
  
  
      TriangularStatusController.$inject = [];
      function TriangularStatusController() {
          var vm = this;
      }
  })();
  </code></pre>