<!DOCTYPE html>
<html>
<head>
<title>AngularJS Model</title>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body>
<div ng-app="my_App" ng-controller="myCtrl">
<label>Name :</label>
<input ng-model="name" placeholder="Your Name">
</div>
<script type="text/javascript">
var app = angular.module('my_App', []);
app.controller('myCtrl', function($scope) {
$scope.name = "Ramana Reddy";
});
</script>
</body>
</html>
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.
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Model - Two way Data Binding</title>
<script type="text/javascript" src="../js/angular.min.js"></script>
</head>
<body>
<div ng-app="my_App" ng-controller="myCtrl">
<label>Name :</label>
<input ng-model="name" placeholder="website name">
<h2>Website Name : {{name}}.</h2>
<h3>(or)</h3>
<h2>Website Name : <a href="{{name}}" target="_blank">{{name}}</a>.</h2>
</div>
<script type="text/javascript">
var app = angular.module('my_App', []);
app.controller('myCtrl', function($scope) {
$scope.name = "http://www.freetimelearning.com";
});
</script>
</body>
</html>