stackoverflow-myquestion: Simple AngularJS Form is undefined in Scope

http://stackoverflow.com/questions/22436501/simple-angularjs-form-is-undefined-in-scope

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<div id="mainContainer" ng-app="angularTest" ng-controller="MainCtrl">
    <h1>The Form</h1>
    <form name="theForm">
        <input name="myName" type="text" ng-model="model.name" />
        <input name="submit" type="submit" />
    </form>
    
    <div id="debugText">
        Text in scope: {{debugText}} <br />
        Form in scope: {{formDebugText}}
    </div>
</div>

CSS

#debugText {
    margin: 10px 0;
    padding: 5px;
    background-color: #eee;
    border: 1px solid #ccc;
}

JavaScript

var app = angular.module('angularTest', []);

app.controller('MainCtrl', ['$scope', function($scope) {
    $scope.model = { name: 'Model Name' };
    $scope.debugText = 'Debug Text in Scope';
    
    //fix - have to wait for everything to load, so we can watch the form and then react...need to remember everything is async here
    $scope.$watch('theForm', function() {
        if($scope.theForm) { 
            $scope.formDebugText = 'Form in Scope';
        }
        else {
            $scope.formDebugText = 'Form is Undefined';
        }
    });
    
    
    
    $scope.$watch('model.name', function() {
        console.log($scope.theForm.$pristine);
    });
}]);