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
This directive binds the model value to the HTML element.
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.
    <script type="text/javascript" src=""></script>
    <div ng-app="">
        UserName :
        <input type="text" ng-model="UserName">
        <hr />
        Hello <span>{{UserName}}</span>
        <br />
        Hello <span ng-bind="UserName"></span>
AngularJS ng-bind and Template example