title: Angular JS Custom Directive not working as element tag
body: <p>I'm playing around with basic Angular JS stuff. I thought I knew custom directives pretty well but I'm only able to get them to show up in the template if I use them as element attributes. And I'm not wanting to use comments or class names as those are not best practices. Based on documentation and other sources these directives SHOULD work as an element AND an element attribute.</p>
  
  <p>In my <code>index</code> you'll see that I'm declaring my directives twice -- in the top block as attributes (which work) and the bottom block as elements (which don't work). I'm hours deep into this problem. Any insight is tremendously appreciated.</p>
  
  <p>Index.html</p>
  
  <pre><code>&lt;head&gt;
    &lt;title&gt;Test App&lt;/title&gt;
  
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
    &lt;link href='styles/css/style.css' rel='stylesheet' type="text/css"&gt;
  
    &lt;script src="vendor/angular_1.2.13/angular.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body ng-app="testApp" class="app__body"&gt;
      &lt;div class="body__inner"&gt;
          &lt;header&gt;
            &lt;h1&gt;My New Test App&lt;/h1&gt;
          &lt;/header&gt;
  
          &lt;div first-directive&gt;&lt;/div&gt;
          &lt;div second-directive&gt;&lt;/div&gt;
  
          &lt;first-directive&gt;&lt;/first-directive&gt;
          &lt;second-directive&gt;&lt;/second-directive&gt;
  
      &lt;/div&gt;
      &lt;script src="scripts/all-in-one.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>all-in-one.js</p>
  
  <pre><code>'use strict';
  
  angular.module('testApp', [])
  
  .directive('firstDirective', function() {
      return {
          template: 'Hello World'
      }
  })
  
  .directive('secondDirective', function() {
      return {
          templateUrl: '/scripts/directives/secondDirective.js'
      }
  })
  
  .controller('firstCtrl', function($scope) {
      $scope.message = "Hola Amigos!"
  })
  </code></pre>
  
  <p>secondDirective.js</p>
  
  <pre><code>&lt;div&gt;
      &lt;h2&gt;Esta Aqui!&lt;/h2&gt;
  &lt;/div&gt;
  </code></pre>