Hello, friends it this tutorial I am going to explain you about ng-bind in  Angular Js. In the previous session, we have discussed ng-model in Angular Js.


The ng-bind directive is used to display the content of variable or expression inside an HTML element. If any changes in the variable or the expression occur, Angular Js also changes the content of the HTML element. The ng-bind is very much different from ng-model. ng-bind supports one-way data binding. ng-bind is very useful. JavaScript framework supports only one-way data binding.


An example of ng-bind:

<!DOCTYPE html>
<html ng-app="helloApp" ng-controller="employeesCtrl">
<title>AngularJS - ng-model vs ng-bind</title>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
 //Creating Angular Module
 var helloApp = angular.module('helloApp', []);

//Creating Controller with Data
 helloApp.controller('employeesCtrl', function($scope) {
 $scope.search="Enter Search Criteria";
<!-- Creating input component and attaching to ng-model -->
Search : <input type="text" ng-model="search"><br><br>
Search ng-bind: <input type="text" ng-model="searchBind"><br><br>
<b>Search Term:</b>{{search}}<br><br>
<!--Mapping input component-->
<span ng-bind="searchBind"></span>
<!--Mapping directly to variable-->
<span ng-bind="search"></span>


Hope you understand about ng-bind in Angular JS.

You must also follow the related links:

Thank You,


  • I simply want to mention I am newbie to blogging and site-building and definitely savored this page. Likely I’m going to bookmark your site . You surely come with remarkable stories. Cheers for revealing your web page.

  • I simply want to say I’m new to blogs and honestly enjoyed your website. Very likely I’m going to bookmark your blog . You actually come with fantastic articles and reviews. Regards for sharing with us your web page.