ng-bind directive in AngularJS


The ng-bind directive will replace the HTML element text with evaluated value of given expression. if the bind expression or variable value changed the control value also changes.

Syntax:
<span ng-bind="Qty"></span>

Example:
In this example we will bind Quantity, Unit Price, Total Price using ng-bind instead of {{ expression }}
Enter Quantity :
Enter Unit Price :

Quantity :
Unit Price :
Total Price :

Source code:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> </head> <body> <div ng-app="SampleApp" ng-controller="SampleCntrl"> <table> <tr> <td> Enter Quantity : </td> <td> <input type="text" ng-model="Qty" /><br /> </td> </tr> <tr> <td> Enter Unit Price : </td> <td> <input type="text" ng-model="UnitPrice" /><br /> </td> </tr> </table> <br /> Quantity : <span ng-bind="Qty"></span> <br /> Unit Price : <span ng-bind="UnitPrice"></span> <br /> Total Price : <span ng-bind="Qty*UnitPrice"></span> <br /> </div> <script> var myapp = angular.module("SampleApp", []); myapp.controller("SampleCntrl", function ($scope) { $scope.Qty = 5; $scope.UnitPrice = 6; }); </script> </body> </html>