title: Onsen AngularJS - not dispalying form data
body: <p>I am writing a cross platform app using Onsen, Monaca and AngularJS.</p>
  
  <p>I have a standard LOGiN screen where users have to enter their User ID so I can log them in via API call.</p>
  
  <p>However, following <a href="http://jsfiddle.net/kutyel/dq8r196v/4/" rel="nofollow noreferrer">THIS</a> example from <a href="https://stackoverflow.com/questions/26602883/angularjs-ng-controller-not-working">HERE</a> I am unable to get my User ID to display. Can anyone see where I am going wrong please?</p>
  
  <p>The output I am seeing looks exactly like this: <strong>Your User ID is: {{lastName}}</strong></p>
  
  <p>All code included.</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html ng-app="myApp"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"&gt;
      &lt;meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"&gt;
  
      &lt;!-- Mobile web App Capable --&gt;
      &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
      &lt;meta name="mobile-web-app-capable" content="yes"&gt;
  
      &lt;title&gt;Management&lt;/title&gt;  
  
      &lt;!-- Tests --&gt;
      &lt;script type="text/javascript" src="js/app.js"&gt;&lt;/script&gt;
  
      &lt;script src="components/loader.js"&gt;&lt;/script&gt;
      &lt;script src="js/winstore-jscompat.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesshet" href="components/monaca-onsenui/js/angular/angular-csp.css"&gt;
      &lt;link rel="stylesheet" href="components/loader.css"&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;
      &lt;script&gt;
          var myApp = angular.module('myApp', ['onsen']);
      &lt;/script&gt; 
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;ons-navigator var="myNavigator" page="login.html"&gt;&lt;/ons-navigator&gt; 
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>login.html</strong></p>
  
  <pre><code>&lt;ons-page&gt;
      &lt;ons-toolbar&gt;
          &lt;div class="center"&gt;Login&lt;/div&gt;
      &lt;/ons-toolbar&gt;
  
      &lt;div ng-controller="personController"&gt;
          &lt;form class="login-form" style="text-align: center" name="myForm"&gt;
              &lt;section style="padding: 8px"&gt;
                  &lt;input type="password" class="text-input--underbar" required minlength="3" maxlength="4"  placeholder="User ID" ng-model="firstName"&gt;
              &lt;/section&gt;
  
              &lt;section&gt;
                  &lt;div style="color: #015794; text-align: right"&gt;
                      &lt;label class="checkbox--noborder"&gt;
                          &lt;input type="checkbox"&gt;
                              &lt;div class="checkbox__checkmark"&gt;&lt;/div&gt;
                              &lt;small&gt;Remember Me&lt;/small&gt;
                      &lt;/label&gt;
                  &lt;/div&gt;
              &lt;/section&gt;
  
              &lt;div ng-app="myApp" style="text-align: center; color: #889DA8"&gt;
                  Your User ID is: &lt;br&gt;&lt;strong&gt;{{lastName}}&lt;/strong&gt;
              &lt;/div&gt;
  
              &lt;section style="padding: 0 8px 8px"&gt;
                  &lt;ons-button var="saveBtn" ng-disabled="myForm.$invalid" modifier="large" onclick="modal.show('modal')"&gt;Log In&lt;/ons-button&gt;
              &lt;/section&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/ons-page&gt;
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>angular.module("myApp", []).controller("personController", function($scope)
  {
      $scope.firstName = "John";
      $scope.lastName = "Doe";
  });
  </code></pre>