title: AngularJS Custom directive doesn't work
body: <p>I'm trying to to get the custom directive I created to work. The directive I created houses a table, which references a controller. I didn't include the ProjectController in my code because that part works, but once i put everything into a custom directive it stopped working. I believe the custom directive isn't getting hit. Any suggestions? </p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>app.directive('projectInformation', function () {
      return {
          restrict: 'E',
          templateUrl: 'project-information.html',
          controller: function() {
              this.products = projects
          },
          controllerAs: 'projectCtrl'
      };
  });
  </code></pre>
  
  <p><strong>project-information.html</strong></p>
  
  <pre><code>&lt;table class="table table-striped"&gt;
  &lt;thead&gt;
      &lt;!--TABLE HEAD--&gt;
      &lt;tr&gt;
          &lt;th&gt;#&lt;/th&gt;
          &lt;th&gt;Project &lt;/th&gt;
          &lt;th&gt;Name &lt;/th&gt;
          &lt;th&gt;Phone &lt;/th&gt;
          &lt;th&gt;Company &lt;/th&gt;
          &lt;th&gt;Date&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;!--TABLE BODY--&gt;
      &lt;!--Angular; Repeats all of the content in the dTIMS project array--&gt;
      &lt;tr ng-repeat="product in projectCtrl.products"&gt;
          &lt;td&gt;{{  product.id  }}&lt;/td&gt;
          &lt;td&gt;{{  product.name  }}&lt;/td&gt;
          &lt;td&gt;{{  product.supervisor  }}&lt;/td&gt;
          &lt;td&gt;{{  product.phone  }}&lt;/td&gt;
          &lt;td&gt;{{  product.company  }}&lt;/td&gt;
          &lt;td&gt;{{  product.date  }}&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>ReviewAndAdjust.cshtml</strong></p>
  
  <pre><code>&lt;div class="col-lg-6"&gt;
      &lt;!--GRAD CONTENT--&gt;
      &lt;!--first instance--&gt;
          &lt;project-information class="table-responsive"&gt;&lt;/project-information&gt;
  &lt;/div&gt;
  
  &lt;div class="content" id="elementGrid"&gt;&lt;!--GRAD CONTENT--&gt;
      &lt;!--second instance--&gt;
      &lt;project-information class="active content table-responsive"&gt;&lt;/project-information&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>LayoutPage.cshtml</strong></p>
  
  <pre><code>&lt;html ng-app="dTIMSApp"&gt;
      &lt;head&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="~/Scripts/app.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;&lt;!--ng-controller="ProjectController as projectCtrl" used to be in body tag--&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/VWdWA.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/VWdWA.jpg" alt="enter image description here"></a></p>
  
  <p>I've also tried using other alternatives to a custom element directive. I tried a custom attribute directive and using the ng-include directive but the div still wont be populated with the table from the html page. Also in the console log for the webpage it says 'GET <a href="http://localhost:58893/Dashboards/project-information.html" rel="noreferrer">http://localhost:58893/Dashboards/project-information.html</a> 404 (Not Found)' </p>