title: Angular JS not displaying in HTML page
body: <p>I know this question definitely get's asked a lot. But I honestly am not sure what I am doing wrong, and the solutions I have found haven't seemed to work.</p>
  
  <p>For reference, I am following this tutorial:
  <a href="https://www.youtube.com/watch?v=OPxeCiy0RdY" rel="nofollow noreferrer">https://www.youtube.com/watch?v=OPxeCiy0RdY</a></p>
  
  <p>Anyway. I am making a simple angular app that let's you input two values and it returns the result I have also included a small tester at the bottom of the HTML code to check and see if maybe I was having issues in my javascript file. I checked my references in the script tags already and made sure they were correct, all of the files are also in the same directory. I have built the controller, module, and referenced them in the HTML code. But for some reason, when I load my index page it simply does not recognize the Angular code parts. My code is as follows:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html ng-app="app1"&gt;
  
  &lt;head&gt;
    &lt;title&gt;Angular Practice Page&lt;/title&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;!-- Adds a controller that the Angular module will control.
      The view is the div element and all that it contains. The $scope
      component is used to provide data to the view. --&gt;
  &lt;body&gt;
    &lt;div ng-controller="ctrl1"&gt;
      &lt;span&gt;Calculate:&lt;/span&gt;
      &lt;input type="text" ng-model="first" /&gt;
      &lt;input type="text" ng-model="second" /&gt;
  
      &lt;button ng-click="updateValue()"&gt;Sum&lt;/button&gt;
      &lt;br /&gt;&lt;br /&gt;
  
      {{calculation}}
  
      &lt;!-- Test Calculation --&gt;
      &lt;p&gt;
        5 + 5 = {{5+5}}
      &lt;/p&gt;
  
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Angular Code:</p>
  
  <pre><code>var app1 = angular.module('app1', []);
  
  app1.controller('ctrl1', function($scope){
    $scope.first = 1;
    $scope.second = 1;
  
    $scope.updateValue = function() {
      $scope.calculation = $scope.first + ' + ' + $scope.second +
      ' = ' + ($scope.first + $scope.second);
    };
  });
  </code></pre>
  
  <p>Image:</p>
  
  <p><a href="https://i.stack.imgur.com/lrUAX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lrUAX.png" alt="The Angular is not being recognized."></a></p>
  
  <p>I've tried moving around the "ng-app" to different parts of the code in the HTML file and just poking around with no luck. </p>
  
  <p>The tutorial teacher also has a completed set of code here: <a href="http://www.newthinktank.com/2016/02/angularjs-tutorial/" rel="nofollow noreferrer">http://www.newthinktank.com/2016/02/angularjs-tutorial/</a> and even when I copied this verbatim it didn't work. Could it be something wrong on my computer? For reference I am using the Atom text editor and google chrome as my browser. I tested it with other browsers and got the same result.</p>
  
  <p>Any explanation would be greatly appreciated. Thanks in advance!</p>