ng-model | ng-bind | ng model and ng bind in angularjs

ng-model directive

Ng-model is used to bind input fields, select and textarea with model and we can use this model in page. Ng-model provides the facility of two-way data binding.

Example of ng-model

We have following textbox. And we want as user will type the data it will show in paragraph tag. If we have to do this task without angularjs then we have to use javascript and need to use the event on which it will display textbox text in paragraph. But with the help of ng-model we will bind this input control with model and after that we can use this model anywhere.


<!DOCTYPE html>
<html lang="en">
<head>
    <title>AngularJS ng-model example</title>
    <meta charset="UTF-8">
    <script src="angular.min.js"></script>
</head>
<body data-ng-app>
    <input type="text" data-ng-model="t1">
    <span>{{t1}}</span>
</body>
</html>

Now execute this code and you will get following output

		
		
		Figure 1

ng-bind

In the above example we have used binding expression to bind the model data. We can also use ng-bind to show model data in application.

ng-bind example


<!DOCTYPE html>
<html lang="en">
<head>
    <title>AngularJS ng-model example</title>
    <meta charset="UTF-8">
    <script src="angular.min.js"></script>
</head>
<body data-ng-app>
    <input type="text" data-ng-model="t1">
    <span ng-bind="t1.toUpperCase()"></span>

</body>
</html>

Now execute this code and you will get same output

Follow @techaltum