AngularJS ng-bind Directive with Example

Here we will learn ng-bind directive in angularjs with example and how to use the ng-bind directive in angularjs applications with example.

AngularJS ng-bind Directive

In angularjs, the ng-bind directive is used to bind/replace the text content of any particular HTML element with the value of a given expression that is used against the ng-bind in angularjs application. The value of the specified HTML element will be updated whenever the value of the given expression will change in angularjs ng-bind directive.

AngularJS ng-bind Directive Syntax

Following is the syntax of using ng-bind directive in angularjs applications.


<div ng-app="">

Enter Name to Display:

<input type="text" ng-model="name">

you entered : <span ng-bind="name"></span>


We will see how to use ng-bind directive in angularjs application with complete example.

AngularJS ng-bind Directive Example

Following is the example of using ng-bind directive in angularjs application.


Live Preview

<!DOCTYPE html>

<html xmlns="">



AngularJs ng-bind Directive Example


<script src=""></script>


var app = angular.module("AngularbindApp", []);

app.controller("Angularbindctrl", function ($scope) {

$ = "";




<body ng-app="AngularbindApp">

<div ng-controller="Angularbindctrl">

Enter Name to Display :

<input type="text" ng-model="name"><br />you entered : <span ng-bind="name"></span>




When we run above code we will get output like as shown below

Output of AngularJS ng-bind Example

Following is the result of using ng-bind directive in angularjs applications.


Angularjs ngbind directive example output or result