What should we use for assigning model data in Angular JS?

Question

I would like to know the better way of assigning model name for each form elements using Angular JS.

I can assign it using individual scope variables.

<input type="text" ng-model="firstName"/>
<input type="text" ng-model="lastName"/>

I can also assign it using singleton object.

<input type="text" ng-model="contact.firstName"/>
<input type="text" ng-model="contact.lastName"/>

Which is the better way of handling form data in terms of memory and execution time?

Answer 1

You should choose the second option, in order to avoid issue with scope inheritance, see the doc:

Scope inheritance is normally straightforward, and you often don't even need to know it is happening... until you try 2-way data binding (i.e., form elements, ng-model) to a primitive (e.g., number, string, boolean) defined on the parent scope from inside the child scope.