---
title: "Data Binding in AngularJS"
description: "Data Binding is one of the most powerful and commonly used features in AngularJS. It provides a way to synchronize the data between the model and the"
author: "Ravi Vishwakarma"
published: 2024-06-24
updated: 2024-06-24
canonical: https://www.mindstick.com/blog/304414/data-binding-in-angularjs
category: "angular js"
tags: ["web development", "angular js", "front-end development"]
reading_time: 2 minutes
---
# Data Binding in AngularJS
[**Data Binding**](https://www.mindstick.com/forum/159666/how-exactly-does-data-binding-work-in-angularjs) is one of the most powerful and commonly used [features](https://www.mindstick.com/articles/12993/5-advanced-features-for-your-odoo-ecommerce-theme) in [AngularJS](https://www.mindstick.com/articles/13081/advantages-disadvantages-of-angularjs-is-that-ideal-for-your-project). It provides a way to synchronize the data between the [model](https://yourviews.mindstick.com/view/81334/america-is-reopening-after-corona-lockdown-but-on-swedish-model) and the view. This means that when the data in the model changes, the view reflects that change, and vice versa.
There are two main types of data binding in AngularJS:
1. **One-Way Data Binding**
2. **Two-Way Data Binding**
## One-Way Data Binding
In one-way data binding, the data flows in one [direction](https://yourviews.mindstick.com/story/5034/10-animals-with-the-best-sense-of-direction), either from the model to the view or from the view to the model. This is [useful](https://www.mindstick.com/articles/12694/how-dolomite-mineral-is-useful-in-human-life) when you only need to [display data](https://www.mindstick.com/forum/160249/what-is-the-role-of-the-display-data-annotation-to-display-name-for-a-model-property-in-dot-net-core) without updating the model from the view.
**Model to View**: [Updates](https://yourviews.mindstick.com/view/88503/us-iran-war-live-updates-trump-says-us-in-no-rush-to-end-iran-war) the view whenever the model changes.
```javascript
{{ message }}
```
**View to Model**: Updates the model when the view changes, usually through [user input](https://www.mindstick.com/forum/159624/setting-an-enum-from-user-input).
```javascript
```
## Two-Way Data Binding
In two-way data binding, the data flows in both directions. Changes in the model [update](https://www.mindstick.com/forum/265/ajax-update-panel) the view, and changes in the view update the model. This is achieved using the `ng-model` directive.
```javascript