AngularJS | Two Way Data Binding | Example

Two Way Data Binding is one of the most important feature of AngularJS. This feature overcome the problem of writing lots of code to update DOM and model.

In earlier days we had been required JQuery to update the DOM and then to save the updated value of DOM we required JavaScript but now by using this feature when data inside the model changes, the view reflect the changes and when data inside the view changes, the model reflect the changes. This process is so fast and automatic that model and view stays updated at all the times.

Lets create an example here :

HTML:

<div class="container p-0 mb-4" style="background-color:#fff;margin-top:85px;">

<div class="row m-0">

<div class="col-12 col-sm-12 col-md-12 col-md-12 mt-3">

<p uib-popover-template="popoverFilter.templateUrl" class="text-center">

<i class="fa fa-edit mr-2"></i>{{popoverFilter.title}}</p>

</div>

</div>

</div>

<div class="text-center">

<script type="text/ng-template" id="dimensionFilterPopoverTemplate.html">

<div class="col-12 col-sm-12 col-md-12 col-lg-12 popover-style">

<input type="text" class="w-100" ng-model="popoverFilter.title"/>

</div>

</script>

</div>

JS:

app.js

MyApp.controller("homeCtrl", function ($scope) {

$scope.popoverFilter = {

templateUrl: 'dimensionFilterPopoverTemplate.html',

title:'Edit Me'

};

});

Result: When i will run the page and click on edit a popover will appear and when i will input the text into the input field the changes will reflect on the static text field.

Thanks.