AngularJS two way Data Binding application

Data binding in AngularJS is the synchronization between the model and the view. Data binding in Angular apps is the automatic synchronization of data between the model and view components. The way that Angular implements data binding lets you treat the model as the single-source-of-truth in your application.

The HTML container where the AngularJS application is displayed, is called the view. The view has access to the model, and there are several ways of displaying model data in the view. You can use the ng-bind directive, which will bind the innerHTML of the element to the specified model property.

two way data binding angularjs application

Two way Data binding AngularJS application

This post is the continuation of my previous AngularJS tutorial, I had explained JSON parsing using AngularJS. In this we are going to explain how to do two way data binding with Angular JS. Data binding is the most useful feature in AngularJS, It will help you to save from writing a lots of regular code.


Database File

Sample database comments table contains four comment id, comments and timestamp.

JavaScript file

A global header for all ajax request charset should be utf-8 and form data should be encoded.

ng-app: It will load the dependencies and the module.

ng-controller: Used to call the controller.

ng-model: Initiate Two Way binding.

ng-repeat: Angular control structure act as for loop.

ng-click: Angular on click event.


The HTML code used to bind the data.


Now create index.php file.

Now connect DB and bind the data in comment.php

Finally add the css file

Click to download

We hope you got a basic idea on develop two way data binding in AngularJS.

This is J.Vetrivel pandian completed MCA & lives in Udangudi,India. Blogging is my Passion, I love to write article about Programming. Apart from blogging, I’ll run Grocery Store that’s my Profession.