title: AngularJS automatic isn't working
body: <p>I am writing a client-side application with AngularJS for fun. In a part of the application it's supposed to show all the applicants in a table, automatically fetched from my JSON array. But it isn't working.</p>
  
  <p>This is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//engine.js
  
  (function(){
      angular
          .module("resumeBase", []);
  })();
  
  //controllers.js
  
  (function(){
      angular
          .module("resumeBase")
          .controller("tabularList", listController);
  
          function listController() {
              var vm = this;
              vm.data = applicants;
          }
  
          var applicants = [
              {
                  firstname: "Nima",
                  lastname: "Bavari",
                  evaluation: 5,
                  category: "IT &amp; Computers",
                  fileLocation: "",
                  empConfirmed: "found",
                  confirmTime: "01-01-2017",
                  employer: "EnDATA",
                  payConfirmed: "yes"
              }
          ]
  })();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="resumeBase"&gt;
      &lt;head&gt;
          &lt;title&gt;::Search Entries::&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="style/main.css" /&gt;
      &lt;/head&gt;&lt;body&gt;
          &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="scripts/engine.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="scripts/controllers.js"&gt;&lt;/script&gt;
          &lt;div id="container" ng-controller="tabularList"&gt;
              &lt;hr /&gt;
              &lt;table&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Firstname&lt;/th&gt;
                      &lt;th&gt;Lastname&lt;/th&gt;
                      &lt;th&gt;Evaluation&lt;/th&gt;
                      &lt;th&gt;Category&lt;/th&gt;
                      &lt;th&gt;Resume&lt;/th&gt;
                      &lt;th&gt;Found Job?&lt;/th&gt;
                      &lt;th&gt;Date and Time&lt;/th&gt;
                      &lt;th&gt;Employer&lt;/th&gt;
                      &lt;th&gt;Paid Us?&lt;/th&gt;
                  &lt;/tr&gt;
  
                  &lt;tr ng-repeat="item in tabularList.data"&gt;
                      &lt;td&gt;{{item.firstname}}&lt;/td&gt;
                      &lt;td&gt;{{item.lastname}}&lt;/td&gt;
                      &lt;td&gt;{{item.evaluation}}&lt;/td&gt;
                      &lt;td&gt;{{item.category}}&lt;/td&gt;
                      &lt;td&gt;&lt;a ng-href="{{item.fileLocation}}" target="blank"&gt;{{item.fileLocation}}&lt;/a&gt;&lt;/td&gt;
                      &lt;td&gt;{{item.empConfirmed}}&lt;/td&gt;
                      &lt;td&gt;{{item.confirmTime}}&lt;/td&gt;
                      &lt;td&gt;{{item.employer}}&lt;/td&gt;
                      &lt;td&gt;{{item.payConfirmed}}&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
              [&lt;a href="index.php"&gt;Add New Entry&lt;/a&gt;]
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What do you recommend? Where is my mistake?</p>