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>

</div>

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="http://www.w3.org/1999/xhtml">

<head>

<title>

AngularJs ng-bind Directive Example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script>

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

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

$scope.name = "";

});

</script>

</head>

<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>

</div>

</body>

</html>

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