Two way databinding in AngularJS

2 way data binding angularjs
angularjs directive two way binding
angularjs two way binding example
ng-model directive example
angularjs ng-model example

In this video we will discuss, Two way databinding in AngularJS. Along the way we also discuss one of the very useful directive in angular ng-model.

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

One of the most useful feature in AngularJS is the Two Way Data-Binding. The Two Way Data-Binding, keeps the model and the view in sync at all times, that is a change in the model updates the view and a change in the view updates the model.

When the model changes the view is automatically updated. This is achieved using the data binding expression in the view.

How about the other way round. How to keep the model up to date when the view changes. That's exactly is the purpose of ng-model directive.

In the html below, notice the input element is decorated with ng-model directive. This ensures that whenever the value in the textbox is changed, angular will automatically update the message property of the $scope object. This means the ng-model directive automatically takes the form values and updates the model. The binding expression does the opposite, i.e whenever the model changes the view is automatically updated.

Because of the two way data binding provided by angular, as you type in the textbox, the value is immediately displayed on the view just below the textbox. This two way binding feature provided by angular, eliminates the need to write any custom code to move data from the model to the view or from the view to the model.

ng-model directive can be used with the following 3 html elements
input
select
textarea

Two way binding example with complex object is also discussed.

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

[rotrose]

Thanks alone is not enough, for the first time I truely understand what data binding is. Million THANKS!

[ymtan]

Superb video on 2 way data binding in AngularJS

[sohanagate]

U know this is the first video in the series which has not been thumbed down. It is like stages in a game. People dont have enough attention span to reach here. People should just keep their mouse pointer away from that place if they cannot appreciate the wonderful efforts of this person. Kudos Venkat.

[codingforcats]

I've seen hundreds of tutorials and I must say, this is THE BEST tutorial in the world, eva!!!
I like how you not only teach the techniques but also the errors and how to go around them.
It is VERY realistic and VERY helpful!! Thank you x infinity!!!

[sravanipesala]

thankyou so much sir, i got the job as a full time employee in usa through ur videos .

[srividhyanittur]

Hi Sir... Srividhya here from London!! Hope you remember me !! I was going through a lot of angularjs tutorials and did not understand this concept of two-way data binding, but after watching this video it so nicely explained in a simple way!!

[MrThetruthdotcom]

Great Explanation of two way data binding!

[sindhu.m]

It's very useful video to understand two-way data binding. Thanks you dude

[shashank]

Lot of Developers especially beginners all over the world are able to keep there jobs, Thanks because of you.

[kevins]

wow... your tutorials are the best. very easy to understand and follow. in-depth examples. From now on you are my teacher.

[rtejashwini]

An awesome which is understood at first
Thank You so much sir

[karthikb]

Venkat, your tutorials are superb! Hands down among the best I've seen - clear, concise and straight to the point! Keep it up!

[muhammadzarshid]

very well done Sir Great man Great work

[mohammedmuneerali]

Awesome Explanation. Looking forward for rest of the :).
Thanks Venkat

[Jackerz]

Very nice start, waiting for the next videos!

[sachinchinnannavar]

Marvellous Explaination sir I have completed all your tutorials.thank you very much

[arcooke]

It's amusing watching the view count decrease as I watch each video in the tutorial series. Low attention spans I guess lol

Excellent tutorial! Thanks so much

[poonam-kamboj]

thanks for sharing :) easily understandable tutorial. it is definitely going to help me in switching jobs :)

[RanjithKumar-wpqs]

Fantastic....Thank u so much...Nice explanation.... :D

[inayathkhan]

Super Tutorial Sir, Thank you so much..understood the concepts very well