anglularJs custom directive not loading <p>I am trying to create a custom directive in the below manor:</p> <p>my main html file:</p> <pre><code>&lt;body ng-app="boom"&gt; &lt;!--&lt;section ng-include="'data-table.html'"&gt;&lt;/section&gt;--&gt; &lt;data-table&gt;&lt;/data-table&gt; &lt;/body&gt; </code></pre> <p>my app.js file:</p> <pre><code>(function () { var app = angular.module('boom', ['ajs-directives']); })(); </code></pre> <p>my ajs-directive.js file:</p> <pre><code>(function () { var app = angular.module('ajs-directives', []); app.directive('dataTable', function () { return { restrict: 'E', templateUrl: 'data-table.html', controller: function () { this.dataSet = dataSet; }, controllerAs: 'tableData' }; }); var dataSet = [ { prop1: 'one', prop2: 'two', prop3: 'three' }, { prop1: 'four', prop2: 'five', prop3: 'six' } ]; })(); </code></pre> <p>And my data-table.html file:</p> <pre><code>&lt;div class="table-wrapper"&gt; &lt;table class="table table-fixed"&gt; &lt;thead class="header"&gt; &lt;tr&gt; &lt;th&gt;Entity&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;/table&gt; &lt;div id="media_table_height" class="table-content scroll-outer"&gt; &lt;div class="scroll-inner"&gt; &lt;table class="table-fixed"&gt; &lt;tbody ng-repeat="data in tableData.dataSet"&gt; &lt;tr class="data-row"&gt; &lt;td&gt;{{data.prop1}}&lt;/td&gt; &lt;/tr&gt; &lt;tr class="data-row"&gt; &lt;td&gt;{{data.prop2}}&lt;/td&gt; &lt;/tr&gt; &lt;tr class="data-row"&gt; &lt;td&gt;{{data.prop3}}&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>The issue I have is that nothing renders in my main html file. Just the <code>&lt;data-table&gt;&lt;/data-table&gt;</code> tags are visible. I get no console errors in Google Chrome.</p> <p>You might be able to see from my main html file that I have tried adding in the data-table.html file using the <code>ng-include="'data-table.html'"</code> attribute (and obviously creating a controller in the ajs-directive.js file). When I did it this way it worked fine.</p> <p>Just wondering why it won't work when I am using the directive - have been googling and tweaking for a few days but can't figure it out.</p>