AngularJS Model
The AngularJS model is responsible for managing application data. It responds to the requests from view and to the instructions from controller to update itself. The ng-model directive binds the value of HTML controls (<input>, <select>, <textarea>) to application data.

The ng-model Directive

 With the ng-model directive you can bind the value of an input field to a variable created in AngularJS.
<!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>
Output :
The ng-model Directive Two way Data Binding

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>
 
Output :