---
description: In this ng-model tutorial, we will learn basic to advanced concepts like attribute, how to use ng-model, input elements, Select element form Dropdown, etc.
title: How to use “ng-model” in AngularJS with EXAMPLES
image: https://www.guru99.com/images/how-to-use-ng-model-in-angularjs.png
---

 

[Skip to content](#main) 

**⚡ Smart Summary**

ng-model in AngularJS binds an input control directly to a property on $scope, keeping the view and the model synchronised in both directions. The sections below cover the attribute, three working examples, and the errors beginners hit most.

* 🔗 **Two-Way Binding:** ng-model pushes user input into the $scope property and pushes controller changes back into the control automatically.
* 📝 **Textarea Binding:** Bind a multi-line string to a textarea and use the \\n escape sequence to force line breaks in the rendered value.
* ☑️ **Checkbox State:** A checkbox bound with ng-model stores a boolean, so true renders the box as checked and false leaves it clear.
* 📋 **Dropdown Lists:** Populate a select element with ng-options and bind the chosen item to a separate model property.
* ⚠️ **Common Failure:** Binding a select to the same object that supplies its option text overwrites that object on the first selection.
* 🛠️ **Validation Hooks:** ng-model adds ng-pristine, ng-dirty, ng-valid and ng-invalid classes that drive conditional styling and form checks.

[ Read More ](javascript:void%280%29;) 

![](https://www.guru99.com/images/how-to-use-ng-model-in-angularjs.png)

## What is ng-model in AngularJS?

ng-model is a directive in AngularJS that represents the model, and its primary purpose is to bind the “view” to the “model”. Whatever the user types into a control is written straight into a property on `$scope`, and whatever the controller writes to that property is pushed straight back into the control.

For example, suppose you wanted to present a simple page to the end user like the one shown below, which asks the user to enter the “First name” and “Last name” in textboxes. And then you wanted to ensure that you store the information the user has entered in your data model.

You can use the ng-model directive to map the text box fields of “First name” and “Last name” to your data model. The directive will ensure that the data in the “view” and that of your “model” are kept in sync the whole time, without a single line of event-handling code.

[](https://www.guru99.com/images/AngularJS/010416%5F0720%5FngmodelinAn1.png)

**⚠️ Version note:** AngularJS (the 1.x branch) reached end of life on 31 December 2021 and no longer receives security patches. The examples below still run, but in modern Angular the same two-way binding is written as `[(ngModel)]` and requires the FormsModule.

## The ng-model Attribute

As discussed in the section above, the ng-model attribute is used to bind the data in your model to the view presented to the user.

**The ng-model attribute is used for,**

1. Binding controls such as input, text area and select elements in the view into the model.
2. Providing a validation behavior — for example, a validation can be added to a text box so that only numeric characters can be entered.
3. Maintaining the state of the control. By state, we mean that the control and the data are always kept in sync: if the value of the data changes, the value in the control changes automatically, and vice versa.
4. Exposing that state as CSS classes. AngularJS adds `ng-pristine`, `ng-dirty`, `ng-valid` and `ng-invalid` to every control carrying an ng-model, which is what makes conditional styling of forms straightforward.

With the attribute understood, the next step is to apply it to the three control types you will meet most often.

## How to use ng-model

### 1) Text Area

The text area tag is used to define a multi-line text input control. The text area can hold an unlimited number of characters, and the text renders in a fixed-width font.

So now let’s look at a simple example of how we can add the ng-model directive to a text area control. In this example, we want to show how we can pass a multiline string from the controller to the view and attach that value to the text area control.

[](https://www.guru99.com/images/AngularJS/010416%5F0720%5FngmodelinAn2.png)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.8.3/angular.js"></script>
</head>
<body>
<h1>Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoCtrl">
    <form>
        Topic Description:<br><br>
        <textarea rows="4" cols="50" ng-model="pDescription"></textarea>
    </form>
</div>

<script>
    var app = angular.module('DemoApp', []);
    app.controller('DemoCtrl', function($scope) {
        $scope.pDescription = "This topic looks at how Angular JS works \nModels in Angular JS";
    });
</script>
</body>
</html>

**Code Explanation:**

1. The **[ng-model directive](https://www.guru99.com/angularjs-controller.html)** attaches the member variable called “pDescription” to the “textarea” control. The “pDescription” variable holds the text that is passed on to the text area control. The `rows="4"` and `cols="50"` attributes simply size the control so that the multi-line text is displayed properly.
2. The member variable “pDescription” is assigned a multiline value. The `\n` escape sequence inside the string is what forces the text onto a second line when the textarea renders it.

**Output:**

[](https://www.guru99.com/images/AngularJS/010416%5F0720%5FngmodelinAn3.png)

From the output, it is clear that the multiline text assigned in the controller is displayed in the text area control, split across two lines exactly where the `\n` sits.

### RELATED ARTICLES

* [AngularJS Expressions: Array, Objects, $eval, Strings ](https://www.guru99.com/angularjs-expressions.html "AngularJS Expressions: Array, Objects, $eval, Strings")
* [AngularJS Directives: ng-init, ng-app, ng-model & ng-repeat ](https://www.guru99.com/angularjs-directive.html "AngularJS Directives: ng-init, ng-app, ng-model & ng-repeat")
* [AngularJS Tutorial for Beginners ](https://www.guru99.com/angularjs-tutorial.html "AngularJS Tutorial for Beginners")
* [Angular Version List & History – Angular 2,4,5,6,7,8 ](https://www.guru99.com/angularjs-1-vs-2-vs-4-vs-5-difference.html "Angular Version List & History – Angular 2,4,5,6,7,8")

### 2) Input elements

The ng-model directive works with ordinary input elements as well. Below we bind a text box and two checkboxes at the same time, so you can see how ng-model handles a string value and a boolean value side by side.

[](https://www.guru99.com/images/AngularJS/010416%5F0720%5FngmodelinAn4.png)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.8.3/angular.js"></script>
</head>
<body>
<h1>Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoCtrl">
    <form>
        Topic Description:<br><br>
        Name : <input type="text" ng-model="pname"><br>
        Topic :<br>
        <input type="checkbox" ng-model="Topic.Controller">Controller<br>
        <input type="checkbox" ng-model="Topic.Models">Models
    </form>
</div>

<script>
    var app = angular.module('DemoApp', []);
    app.controller('DemoCtrl', function($scope) {
        $scope.pname = "Guru99";

        $scope.Topic = {
            Controller: true,
            Models: false
        };
    });
</script>
</body>
</html>

**Code Explanation:**

1. The ng-model directive attaches the member variable “pname” to the text input control, and the properties `Topic.Controller` and `Topic.Models` to the two checkbox controls.
2. In the controller, “pname” is given the string “Guru99”, and the “Topic” object is given two boolean members. A checkbox bound with ng-model always reads and writes a boolean, which is why `true` renders the box as checked and `false` leaves it clear.

**Output:**

[](https://www.guru99.com/images/AngularJS/010416%5F0720%5FngmodelinAn5.png)

**From the output,**

* It can be clearly seen that the value assigned to the `pname` variable is “Guru99”.
* Since the first bound value is `true`, the checkbox is marked for the “Controller” checkbox. Likewise, since the second value is `false`, the checkbox is not marked for the “Models” checkbox.

### 3) Select element from Dropdown

The ng-model directive can also be applied to the select element, so that the item the user chooses is stored in the model.

Here we will have a text input which holds the name “Guru99”, and a select list with two list items, “Controller” and “Models”.

[](https://www.guru99.com/images/AngularJS/010416%5F0720%5FngmodelinAn6.png)

**⚠️ Correction:** The screenshot above shows the original listing, which bound the select element to the very same `Topics` object that supplied the option text. The moment a user picks an option, AngularJS overwrites `Topics` with the selected string and both options vanish. The corrected listing below keeps the list in one property and the selection in another, and uses `ng-options` to build the list.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.8.3/angular.js"></script>
</head>
<body>
<h1>Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoCtrl">
    <form>
        Topic Description:<br><br>
        Name : <input type="text" ng-model="pName"><br>
        Topic :<br>
        <!-- Topics holds the list; selectedTopic holds the choice -->
        <select ng-model="selectedTopic" ng-options="t for t in Topics"></select>
    </form>
</div>

<script>
    var app = angular.module('DemoApp', []);
    app.controller('DemoCtrl', function($scope) {
        $scope.pName = "Guru99";

        $scope.Topics = ["Controller", "Models"];
        $scope.selectedTopic = $scope.Topics[0];
    });
</script>
</body>
</html>

**Code Explanation:**

1. The text input is bound to `pName`, and the select element is bound to `selectedTopic`. Because the select has its own model property, choosing an option never disturbs the list itself.
2. The `Topics` array holds the two values “Controller” and “Models”. The `ng-options` expression walks that array and renders one option per entry, so adding a third topic requires no change to the markup.
3. `selectedTopic` is pre-set to the first entry, which is what makes the dropdown open with a sensible default instead of a blank row.

**Output:**

[](https://www.guru99.com/images/AngularJS/010416%5F0720%5FngmodelinAn7.png)

From the output, it can be seen that the value assigned to the `pName` variable is “Guru99”, and the select control offers the options “Controller” and “Models”. Working examples aside, bindings do sometimes refuse to update, and the reasons are worth knowing.

## Why ng-model Bindings Sometimes Fail

Most reported ng-model problems are not bugs in AngularJS but consequences of how scopes and primitives work.

The classic case is a binding placed inside a directive that creates a child scope, such as [ng-repeat](https://www.guru99.com/angularjs-ng-repeat.html), ng-if or ng-switch. Writing `ng-model="name"` there creates a shadow copy on the child scope, so the parent never sees the edit. Binding to a property of an object instead — `ng-model="user.name"` — keeps every scope pointing at the same reference. This is the reason experienced AngularJS developers insist on a dot in every ng-model expression.

Two further causes account for most of the rest:

* **Missing controller or module:** if ng-app or ng-controller is misspelt, the binding silently renders nothing rather than raising an error.
* **Value changed outside AngularJS:** a value set from a jQuery handler or a setTimeout callback lands outside the digest cycle, so the view does not refresh until `$scope.$apply()` runs.

Checking those three things resolves the large majority of bindings that appear not to work.

## FAQs

🔍 What is the difference between ng-model and ng-bind?

ng-bind is one-way: it prints a model value into an element. ng-model is two-way and works only on form controls, so user input flows back into the model as well as out of it.

⏱️ How do you delay a binding update while the user types?

Add ng-model-options, for example ng-model-options=”{ debounce: 500 }”. AngularJS then waits half a second after the last keystroke before updating the model, which is useful for search boxes that trigger a request.

🤖 Can AI convert ng-model code to modern Angular?

Largely, yes. AI assistants rewrite ng-model as \[(ngModel)\] and add the FormsModule import. Reactive forms, custom parsers and $formatters pipelines still need manual review, because Angular models them very differently.

🧠 How does AI help debug a binding that never updates?

AI tools check the usual suspects fast: a primitive bound inside a child scope, a misspelt controller name, and a value assigned outside the digest cycle. Each produces a silent failure rather than a console error.

🔢 Why does a number input return a string?

Only input type=”number” is parsed to a numeric value. A type=”text” control always yields a string, so comparisons with === fail. Convert explicitly, or switch the input type.

#### Summarize this post with:

ChatGPT Perplexity Grok Google AI 

**Stay Updated on AI** **Get Weekly AI Skills, Trends, Actionable Advice.** 

##### Sign up for the newsletter

Subscribe for Free 

You have successfully subscribed.  
Please check your inbox. 

![AI-Newsletter]() Chosen by over **350,000+** professionals 

[Scroll to top ](#wrapper)Scroll to top 

× 

Toggle Menu Close 

Search for: 

Search

```json
{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://www.guru99.com/#organization","name":"Guru99","sameAs":["https://www.facebook.com/Guru99Official","https://twitter.com/guru99com"],"logo":{"@type":"ImageObject","@id":"https://www.guru99.com/#logo","url":"https://www.guru99.com/images/guru99-logo-v1-150x59.png","contentUrl":"https://www.guru99.com/images/guru99-logo-v1-150x59.png","caption":"Guru99","inLanguage":"en-US"}},{"@type":"WebSite","@id":"https://www.guru99.com/#website","url":"https://www.guru99.com","name":"Guru99","publisher":{"@id":"https://www.guru99.com/#organization"},"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https://www.guru99.com/images/how-to-use-ng-model-in-angularjs.png","url":"https://www.guru99.com/images/how-to-use-ng-model-in-angularjs.png","width":"700","height":"250","caption":"How to use \u201cng-model\u201d in AngularJS","inLanguage":"en-US"},{"@type":"BreadcrumbList","@id":"https://www.guru99.com/ng-model-angularjs.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":"1","item":{"@id":"https://www.guru99.com","name":"Home"}},{"@type":"ListItem","position":"2","item":{"@id":"https://www.guru99.com/angularjs","name":"AngularJS"}},{"@type":"ListItem","position":"3","item":{"@id":"https://www.guru99.com/ng-model-angularjs.html","name":"How to use &#8220;ng-model&#8221; in AngularJS with EXAMPLES"}}]},{"@type":"WebPage","@id":"https://www.guru99.com/ng-model-angularjs.html#webpage","url":"https://www.guru99.com/ng-model-angularjs.html","name":"How to use &#8220;ng-model&#8221; in AngularJS with EXAMPLES","dateModified":"2026-07-30T19:39:14+05:30","isPartOf":{"@id":"https://www.guru99.com/#website"},"primaryImageOfPage":{"@id":"https://www.guru99.com/images/how-to-use-ng-model-in-angularjs.png"},"inLanguage":"en-US","breadcrumb":{"@id":"https://www.guru99.com/ng-model-angularjs.html#breadcrumb"}},{"@type":"Person","@id":"https://www.guru99.com/author/james","name":"James Hartman","description":"I am James Hartman, a seasoned professional in Oracle Certified Java Professional tutorials, specializing in crafting comprehensive guides to help you excel in your Java certification journey.","url":"https://www.guru99.com/author/james","image":{"@type":"ImageObject","@id":"https://www.guru99.com/images/james-hartman-author-v2-120x120.png","url":"https://www.guru99.com/images/james-hartman-author-v2-120x120.png","caption":"James Hartman","inLanguage":"en-US"},"worksFor":{"@id":"https://www.guru99.com/#organization"}},{"articleSection":"AngularJS","headline":"How to use &#8220;ng-model&#8221; in AngularJS with EXAMPLES","description":"In this ng-model tutorial, we will learn basic to advanced concepts like attribute, how to use ng-model, input elements, Select element form Dropdown, etc.","keywords":"angularjs","speakable":{"@type":"SpeakableSpecification","cssSelector":[".entry-title",".summary"]},"@type":"Article","author":{"@id":"https://www.guru99.com/author/james","name":"James Hartman"},"dateModified":"2026-07-30T19:39:14+05:30","image":{"@id":"https://www.guru99.com/images/how-to-use-ng-model-in-angularjs.png"},"copyrightYear":"2026","name":"How to use &#8220;ng-model&#8221; in AngularJS with EXAMPLES","subjectOf":[{"@type":"HowTo","name":"How to use 'ng-model' in AngularJS with EXAMPLES","description":"ng-model is a directive in Angular.JS that represents models and its primary purpose is to bind the 'view' to the 'model'.","step":[{"@type":"HowToStep","name":"Step 1) Text Area","text":"The text area tag is used to define a multi-line text input control.","image":{"@type":"ImageObject","url":"https://cdn.guru99.com/images/AngularJS/010416_0720_ngmodelinAn2.png"},"url":"https://www.guru99.com/ng-model-angularjs.html#step1"},{"@type":"HowToStep","name":"Step 2) Input elements","text":"The ng-model directive can also be applied to the input elements such as the text box, checkboxes, radio buttons, etc.","image":{"@type":"ImageObject","url":"https://cdn.guru99.com/images/AngularJS/010416_0720_ngmodelinAn4.png"},"url":"https://www.guru99.com/ng-model-angularjs.html#step2"},{"@type":"HowToStep","name":"Step 3) Select element form Dropdown","text":"The ng-model directive can also be applied to the select element and be used to populate the list items in the select list.","image":{"@type":"ImageObject","url":"https://cdn.guru99.com/images/AngularJS/010416_0720_ngmodelinAn6.png"},"url":"https://www.guru99.com/ng-model-angularjs.html#step3"}]},{"@type":"FAQPage","mainEntity":[{"@type":"Question","name":"What is the difference between ng-model and ng-bind?","acceptedAnswer":{"@type":"Answer","text":"ng-bind is one-way: it prints a model value into an element. ng-model is two-way and works only on form controls, so user input flows back into the model as well as out of it."}},{"@type":"Question","name":"How do you delay a binding update while the user types?","acceptedAnswer":{"@type":"Answer","text":"Add ng-model-options, for example ng-model-options=\"{ debounce: 500 }\". AngularJS then waits half a second after the last keystroke before updating the model, which is useful for search boxes that trigger a request."}},{"@type":"Question","name":"Can AI convert ng-model code to modern Angular?","acceptedAnswer":{"@type":"Answer","text":"Largely, yes. AI assistants rewrite ng-model as [(ngModel)] and add the FormsModule import. Reactive forms, custom parsers and $formatters pipelines still need manual review, because Angular models them very differently."}},{"@type":"Question","name":"How does AI help debug a binding that never updates?","acceptedAnswer":{"@type":"Answer","text":"AI tools check the usual suspects fast: a primitive bound inside a child scope, a misspelt controller name, and a value assigned outside the digest cycle. Each produces a silent failure rather than a console error."}},{"@type":"Question","name":"Why does a number input return a string?","acceptedAnswer":{"@type":"Answer","text":"Only input type=\"number\" is parsed to a numeric value. A type=\"text\" control always yields a string, so comparisons with === fail. Convert explicitly, or switch the input type."}}]}],"@id":"https://www.guru99.com/ng-model-angularjs.html#schema-29505","isPartOf":{"@id":"https://www.guru99.com/ng-model-angularjs.html#webpage"},"publisher":{"@id":"https://www.guru99.com/#organization"},"inLanguage":"en-US","mainEntityOfPage":{"@id":"https://www.guru99.com/ng-model-angularjs.html#webpage"}}]}
```