var app = angular.module('my_App', []);
app.controller('myCtrl', function($scope) {
$scope.f_name = "Venkataramana Reddy";
$scope.l_name = "Vippagunta";
});
Data-binding in Angular apps is the automatic synchronization between the model and view components.
Two way data binding model as the single-source-of-truth in your application. When data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well. This happens immediately and automatically, which makes sure that the model and the view is updated at all times.
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Data Binding</title>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body>
<div ng-app="my_App" ng-controller="myCtrl">
Name: <input ng-model="f_name" type="text">
<h2>First Name : {{f_name}}</h2>
</div>
<script type="text/javascript">
var app = angular.module('my_App', []);
app.controller('myCtrl', function($scope) {
$scope.f_name = "Venkataramana Reddy";
$scope.l_name = "Vippagunta";
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Data Binding</title>
<script type="text/javascript" src="../js/angular.min.js"></script>
</head>
<body>
<div data-ng-app="">
<h3>Two Way Data Binding</h3>
<strong>Number 1 :</strong> <input type="number" ng-model="num_1"> <br /><br />
<strong>Number 2 :</strong> <input type="number" ng-model="num_2"> <br /><br /><br />
<p><b>Addition :</b> {{num_1 + num_2}}</p>
<p><b>Subtraction :</b> {{num_1 - num_2}}</p>
<p><b>Multiplication :</b> {{num_1 * num_2}}</p>
<p><b>Division :</b> {{num_1 / num_2}}</p>
<p><b>Modulus :</b> {{num_1 % num_2}}</p>
</div>
</body>
</html>