title: AngularJs not compiling
body: <p>I created a basic AngularJS app and it's not displaying the values on the live site declared on the controller.</p>
  
  <p>The live site displays the expressions written on the controller file instead.</p>
  
  <p>ie. - It displays:</p>
  
  <p>{{ title }}
  {{ paragraph }}</p>
  
  <p>Instead of:</p>
  
  <p>First Angular Title
  First Angular Paragraph</p>
  
  <p>index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Angular Application&lt;/title&gt;
        &lt;script src="js/shared/angular.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body ng-app="mainApp"&gt;
  
      &lt;div ng-controller="MainController"&gt;
  
        &lt;h1&gt; {{ title }} &lt;/h1&gt;
        &lt;p&gt; {{ paragraph }}&lt;p&gt;
  
      &lt;/div&gt;
  
      &lt;!-- Modules --&gt;
      &lt;script src="js/app.js"&gt;&lt;/script&gt;
  
      &lt;!-- Controllers --&gt;
      &lt;script src="js/controllers/MainController.js"&gt;&lt;/script&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>MainController.js</p>
  
  <pre><code>app.controller("MainController", ['$scope', function($scope) {
      $scope.title = "First Angular Title";
      $scope.paragraph = "First Angular Paragraph";
  }]);
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>var app = angular.module("mainApp", []);
  </code></pre>
  
  <ul>
  <li>I don't know what I'm doing wrong. I'm completely new to this. I appreciate any help. Thanks for your time.</li>
  </ul>