Menu ▼

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.

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

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="">
    <script src=""></script>
    <div ng-app="SampleApp" ng-controller="SampleCntrl">
                    Enter Quantity :
                    <input type="text" ng-model="Qty" /><br />
                    Enter Unit Price :
                    <input type="text" ng-model="UnitPrice" /><br />
        <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 />
        var myapp = angular.module("SampleApp", []);
        myapp.controller("SampleCntrl", function ($scope) {
            $scope.Qty = 5;
            $scope.UnitPrice = 6;

comments powered by Disqus