Hi rani,
Check this example.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', []);
app.controller('ngbindController', function ($scope) {
$scope.Greeting = 'Welcome to aspsnippets !';
});
app.controller('ngbindhtmlController', function ($scope, $sce) {
$scope.Test = 'Welcome to <a href="https://www.aspsnippets.com/" target="_blank">aspsnippets</a> !';
$scope.Greeting = $sce.trustAsHtml($scope.Test);
});
app.controller('ngbindtemplateController', function ($scope, $sce) {
$scope.Welcome = 'Welcome to ';
$scope.Message = 'aspsnippets !';
});
app.controller('ngnonbindableController', function ($scope, $sce) {
$scope.Greeting = 'Welcome to aspsnippets !';
});
app.controller('ngmodelController', function ($scope, $sce) {
$scope.Greeting = 'Welcome to aspsnippets !';
});
</script>
</head>
<body ng-app="MyApp">
<h1>AngularJS provides many predefined data binding directives.</h1>
<h3>ng-bind</h3>
<p>The ng-bind directive tells AngularJS to replace the content of an HTML element with the value of a given variable or expression.</p>
<p>If the value of the given variable or expression changes the content of the specified HTML element will be changed as well.</p>
<div ng-controller="ngbindController">
<h4>Example : </h4>
<span ng-bind="Greeting"></span>
</div>
<hr />
<h3>ng-bind-html</h3>
<p>The ng-bind-html directive is a secure way of binding content to an HTML element.</p>
<p>When you are writting HTML in your application, you should check the HTML for dangerous code.</p>
<div ng-controller="ngbindhtmlController">
<h4>Example : </h4>
<span ng-bind-html="Greeting"></span>
</div>
<hr />
<h3>ng-bind-template</h3>
<p>The ng-bind-template directive tells AngularJS to replace the content of an HTML element with the value of the given expressions.</p>
<p>Use the ng-bind-template directive when you want to bind more than one expression to your HTML element.</p>
<div ng-controller="ngbindtemplateController">
<h4>Example : </h4>
<span ng-bind-template="{{Welcome}} {{Message}}"></span>
</div>
<hr />
<h3>ng-non-bindable</h3>
<p>The ng-non-bindable directive specifies that the content of this HTML element and its child nodes should not be compiled by AngularJS.</p>
<div ng-controller="ngnonbindableController">
<h4>Example : </h4>
<span>Evaluating expression : {{Greeting}}</span><br />
<span ng-non-bindable>Not evaluating expression : {{Greeting}}</span>
</div>
<hr />
<h3>ng-model</h3>
<p>The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.</p>
<p>With the ng-model directive you can bind the value of an input field to a variable created in AngularJS.</p>
<p>The binding goes both ways. If the user changes the value inside the input field the AngularJS property will also change its value.</p>
<div ng-model="ngmodelController">
<h4>Example : </h4>
<input ng-model="Greeting" />
<span>You have entered : {{Greeting}}</span>
</div>
</body>
</html>
Demo
For more details refer below link.
Data Binding in AngularJS
