Onsen AngularJS - not dispalying form data

I am writing a cross platform app using Onsen, Monaca and AngularJS.

I have a standard LOGiN screen where users have to enter their User ID so I can log them in via API call.

However, following THIS example from HERE I am unable to get my User ID to display. Can anyone see where I am going wrong please?

The output I am seeing looks exactly like this: Your User ID is: {{lastName}}

All code included.

index.html

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">

    <!-- Mobile web App Capable -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">

    <title>Management</title>  

    <!-- Tests -->
    <script type="text/javascript" src="js/app.js"></script>

    <script src="components/loader.js"></script>
    <script src="js/winstore-jscompat.js"></script>
    <link rel="stylesshet" href="components/monaca-onsenui/js/angular/angular-csp.css">
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
        var myApp = angular.module('myApp', ['onsen']);
    </script> 
</head>

<body>
    <ons-navigator var="myNavigator" page="login.html"></ons-navigator> 
</body>
</html>

login.html

<ons-page>
    <ons-toolbar>
        <div class="center">Login</div>
    </ons-toolbar>

    <div ng-controller="personController">
        <form class="login-form" style="text-align: center" name="myForm">
            <section style="padding: 8px">
                <input type="password" class="text-input--underbar" required minlength="3" maxlength="4"  placeholder="User ID" ng-model="firstName">
            </section>

            <section>
                <div style="color: #015794; text-align: right">
                    <label class="checkbox--noborder">
                        <input type="checkbox">
                            <div class="checkbox__checkmark"></div>
                            <small>Remember Me</small>
                    </label>
                </div>
            </section>

            <div ng-app="myApp" style="text-align: center; color: #889DA8">
                Your User ID is: <br><strong>{{lastName}}</strong>
            </div>

            <section style="padding: 0 8px 8px">
                <ons-button var="saveBtn" ng-disabled="myForm.$invalid" modifier="large" onclick="modal.show('modal')">Log In</ons-button>
            </section>
        </form>
    </div>
</ons-page>

app.js

angular.module("myApp", []).controller("personController", function($scope)
{
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});

Solution

From my point of view the problem seems to be lying with the structure. You seem to be doing things in the wrong order and potentially doing some things twice. Currently you have

<script type="text/javascript" src="js/app.js"></script>
<script src="components/loader.js"></script>
...
<script>
    var myApp = angular.module('myApp', ['onsen']);
</script>

And you are defining your controller in app.js. However it seems like angular should be loaded after that with loader.js, and you are adding onsen at the end, creating the same angular module again.

The order should be first loader.js then app.js, which should be adding Onsen on the first line.

index.html

<script src="components/loader.js"></script>
<script src="js/app.js"></script>

app.js

angular.module("myApp", ['onsen']).controller("personController", function($scope){
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});

DEMO