AngularJS ng-bind

  • The ng-bind directive in AngularJS used to bind the expressions with data.
  • Here the ngbind is used to do two way data binding in AngularJS.
  • If the value of the given data is changed then it will be synchronized with expression and vice versa.
  • Instead of using ng-bind directly, we can use double curly bracket like {{expression}}.
  • ng-bind is preferable to use, before the compilation of the AngularJS a pattern is temporarily displayed in the browser.
  • ng-bind makes the bindings invisible to the user when the page is loading. Hence the ng-bind is consider as an element attribute.

Syntax for ng-bind directive in AngularJS:

<element ng-bind="expression"></element>

Parameter Values:

Value Description
expression Denotes a variable, or an expression to evaluate.

Sample coding for ng-bind directive in AngularJS:

 Tryit<!DOCTYPE html>
        <title>Wikitechy AngularJS Tutorials</title>
        <script src="
        angular.min.js"> </script>
        <div ng-app="" ng-init="myText='Welcome to'">
            <p ng-bind="myText"></p>

ng-bind directive declaration in AngularJS:

<div ng-app="" ng-init="myText='Welcome to'">
<p ng-bind="myText"></p>

Code Explanation for ng-bind directive in AngularJS:

Code Explanation for ng bind Directive In AngularJS

  1. The ng-app specifies the root element (e.g. <body> or <html> or <div> tags) to define AngularJS application.
  2. The ng-init is used to initialize the values for an application.(here the value Welcome to is point out for “mytext”)
  3. The ng-bind is used to bind the AngularJS values and get the value from to the HTML Document. AngularJS will automatically update the text from the “text” variable.

Sample Output for ng-bind directive in AngularJS:

Sample Output for ng bind Directive In Angularjs

  1. The content Welcome to is displayed in the output.

Related Searches to angularjs ng-bind directive