Improve this Doc View Source

The `ngBind` attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes.

Typically, you don't use `ngBind` directly, but instead you use the double curly markup like `{{ expression }}` which is similar but less verbose.

It is preferable to use `ngBind` instead of `{{ expression }}` if a template is momentarily displayed by the browser in its raw state before Angular compiles it. Since `ngBind` is an element attribute, it makes the bindings invisible to the user while the page is loading.

An alternative solution to this problem would be using the ngCloak directive.

## Directive Info

- This directive executes at priority level 0.

## Usage

- as attribute:

      <ANY
        ng-bind="expression">
      ...
      </ANY>

- as CSS class:

      <ANY class="ng-bind: expression;"> ... </ANY>

### Arguments

Param | Type | Details
--- | --- | ---
ngBind | expression | Expression to evaluate.

## Example

Enter a name in the Live Preview text box; the greeting below the text box changes instantly.

Edit in Plunker

    <script>
      angular.module('bindExample', [])
        .controller('ExampleController', ['$scope', function($scope) {
          $scope.name = 'Whirled';
        }]);
    </script>
    <div ng-controller="ExampleController">
      <label>Enter name: <input type="text" ng-model="name"></label><br>
      Hello <span ng-bind="name"></span>!
    </div>

    it('should check ng-bind', function() {
      var nameInput = element(by.model('name'));

      expect(element(by.binding('name')).getText()).toBe('Whirled');
      nameInput.clear();
      nameInput.sendKeys('world');
      expect(element(by.binding('name')).getText()).toBe('world');
    });