Two Way Binding in AngularJS

In this blog you will learn Two Way Binding in AngularJS.

Two-way data binding is when the model changes, the view reflects the change, and vice versa. When we have more than one html element bound to the same model variable.HTML element that can both change and display the value of the variable. Two-way bindings in AngularJS are created with the ng-model directive.

Step 1: Make a AngularJS module and controller.

var app=angular.module("myApp", [])
app.controller("myCtrl" ,function($scope) {
  $scope.firstName = "virendra";
    $scope.lastName="Gour";
});

Step 2: Create html page and use directives.

<div ng-app="myApp">
  <div ng-controller="myCtrl">
            <input type="text" ng-model="firstName">
         <input type="text" ng-model="lastName">
             <br />
             <span ng-bind="firstName"></span>
           <span ng-bind="lastName"></span>
  </div>
</div>

Here is calling our controller by ng-controller directive and we have two input text decorates by ng-mode directive. Values of variable firstName and lastName will display in input text and also in span but magic is that when you will change the values of input text changes will also reflect in span.