In this article I will explain with simple example, how to use ng-bind and templates in AngularJS.
Both ng-bind directive and templates are used to display data in AngularJS.
 
AngularJS ng-bind and Template
ng-bind
This directive binds the model value to the HTML element.
Template
Templates are wrapped within curly braces {{ }}. It is used to bind expressions to HTML.
 
Displaying data using ng-bind and templates in AngularJS
Following is a simple example to display data using ng-bind and templates in AngularJS. In this example, I have set the ng-model directive for the TextBox.
There are two HTML SPAN elements of which one is set with a template expression while other is specified with the ng-bind directive.
As we type in the TextBox, both the HTML SPAN elements display the value of the TextBox dynamically and that too without writing a single line of JavaScript code.
<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <div ng-app="">
        UserName :
        <input type="text" ng-model="UserName">
        <hr />
        Hello <span>{{UserName}}</span>
        <br />
        Hello <span ng-bind="UserName"></span>
    </div>
</body>
</html>
 
 
Screenshot
AngularJS ng-bind and Template example
 
 
Demo
View Demo
 
 
Downloads
Download Code