Simple AngularJS Form is undefined in Scope

Question

I\'m starting to play around with AngularJS forms in jsfiddle and I\'ve come across a problem already where a very simple form example is not working as expected. All I have

Answer 1

A good way to perform this without using watch (which is a bit overkill) is to define an object in the scope into which you will register the form.

HTML

<div id="mainContainer" ng-app="angularTest" ng-controller="MainCtrl">
    <h1>The Form</h1>
    <form name="form.theForm">
        <input name="myName" type="text" ng-model="model.name" />
        <input type="button" value="Here the scope" ng-click="display()"/>
        <input name="submit" type="submit" />
    </form>
</div>

JS

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

app.controller('MainCtrl', ['$scope', function($scope) {
    $scope.model = { name: 'Model Name' };
    $scope.form = {};
    $scope.display = function () {
        console.log($scope.form.theForm);
    }
}]);