title: What is wrong with this particular AngularJS code?
body: <p>So I just learning AngularJS via several online websites after having familiarized myself with, and learned, basic JS, HTML, and CSS. I found those 3 fairly simple to learn but am having a bit of an issue with AngularJS. I am really just at the beginning but have a question as to why a code that I am inputting is not returning the desired result. I have two windows (or files... I am not sure what the correct vocab is here) open. A js one titled main.js and an index file titled index.html. In main.js I have:</p>
  
  <pre><code>    var app= angular.module('myApp'),[])
  
      app.controller('MyController', function($scope) {
        $scope.person = {
          name: "Papa Bear"
        };
      }); 
  </code></pre>
  
  <p>In the index file I have: </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html ng-app='myApp'&gt;
    &lt;head&gt;
      &lt;script src='js/main.js'&gt;&lt;/script&gt;
      &lt;/head&gt;
    &lt;body&gt; 
    &lt;h2&gt; Hi there &lt;/h2&gt;
  &lt;div ng-controller='MyController'&gt;
    {{ person.name }}
  &lt;/div&gt;
    &lt;/body&gt;
    &lt;html&gt;
  </code></pre>
  
  <p>The "Hi there" displays just fine. But the {{ person.name }} which (I am fairly certain) should return: Papa Bear simply shows up as literally "{{ person.name }}". Where is the error in my code that it is not connecting person.name to Papa Bear?</p>