AngularJS ng-bind Directive with Example

  Total Views : 4133
  Comments : 0
  Keywords : What is ngbind directive in angularjs, How to use angularjs ngbind directive in application, Angularjs ngbind directive to bind data to html element with example

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

AngularJS ng-bind Directive

“ng-bind” as the name suggest is used to bind/replace text content of any particular HTML element with the value of 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 given expression will change in angularjs ngbind directive.

Syntax of AngularJS ng-bind Directive

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 this ng-bind directive in angularjs application with complete example

Example of AngularJS ng-bind Directive

Following is the example of using ngbind 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

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


Angularjs ngbind directive example output or result

 Comments (0)

Be the first to give your valuable feedback

Leave a comment

  • Default Tutlane User