Two way data binding in AngularJS

How to implement two way data binding in AngularJS

Two way data binding in AngularJS means binding data from Model to View and vice versa.

    <script>
        var app = angular.module('app', []);
        app.controller('myController', function($scope) {
            $scope.FullName = "Change Full Name here";
            $scope.Address = "Change Address here";
        });
    </script>


    <div ng-app="app" ng-controller="myController">
        <p>Change values of textbox</p>
        <p>
            Full Name: <input type="text" ng-model="FullName" /> <br /> <br />
            Address: <input type="Text" ng-model="Address" />
        </p>
        <hr />
        <p>
        Full Name: <span style="background-color:yellow;">{{FullName}}</span><br/>
        Address: <span style="background-color:yellow;" ng-bind="Address"></span>
        </p>
    </div>

In above code snippet, we have FullName and Address variables in the controller representing the model value.

When the page loads, these values are set in the data binding placehoders (here first data binding placeholder is {{ FullName}} and second data binding placeholder is ng-bind attribute (one way binding - model to view).

Now when user changes the textbox value, the placeholder values in the yellow background changes in real time (two way data binding - view to model).

Output

Twp way binding - AngularJS