Improve this Doc View Source

## Overview

The `ngBindTemplate` directive specifies that the element text content should be replaced with the interpolation of the template in the `ngBindTemplate` attribute. Unlike `ngBind`, the `ngBindTemplate` can contain multiple `{{` `}}` expressions. This directive is needed since some HTML elements (such as TITLE and OPTION) cannot contain SPAN elements.

## Directive Info

- This directive executes at priority level 0.

## Usage

- as element:

      <ng-bind-template
        ng-bind-template="string">
      ...
      </ng-bind-template>

- as attribute:

      <ANY
        ng-bind-template="string">
      ...
      </ANY>

### Arguments

Param | Type | Details
--- | --- | ---
ngBindTemplate | string | template of form `{{` `expression` `}}` to eval.

## Example

Try it here: enter text in text box and watch the greeting change.

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

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

      expect(salutationElem.getText()).toBe('Hello World!');

      salutationInput.clear();
      salutationInput.sendKeys('Greetings');
      nameInput.clear();
      nameInput.sendKeys('user');

      expect(salutationElem.getText()).toBe('Greetings user!');
    });