Easy learning with example program codes

Angularjs two way data binding tutorial

As we discussed in earlier tutorials that ng-model directive is used to define the model or variable for a HTML element to be used in AngularJS i.e. it binds the state of HTML element with model value. If the value HTML element changes, AngularJS automatically change the model value and vice-versa.

Angularjs two way data binding diagram:

two-waybinding codesjava

Example Explanation:

First include the AngularJS library in the application. The ng-app directive initializes the application. The ng-model directive binds the state of the input text to the name variable. When we enter a value in name input box, the corresponding value will automatically updated in next line and vice-versa.


<!DOCTYPE html>
 <script src=
   <div ng-app="">
    <p>Name: <input type="text" ng-model="name"></p>
     <h1>Hello {{name}}</h1>

Try it:

JS Bin on

Industrial Training

We offers Placement Oriented Training on Java, Spring, JSF, Hibernate, PHP, AngularJS, Angular 4, PLSQL, Oracle BI Publisher etc. We also provides Online training, please mail us at


We also provides the Development services for Website Development , Java Development, PHP Development, Android App Development etc. You can contact us on

Copyright © 2019 CodesJava Protection Status SiteMap Reference: Java Wiki