The template directives allow you to place formatted text inside a tokenized string template. This avoids the need to build HTML manually on the server or in a custom directive where HTML injection bugs are common. The string template is specified with the bb-template attribute, and child elements with the bb-template-item attribute are the elements that contain the formatted text.

Template settings

  • bb-template — The tokenized string that represents the template. Tokens use the {n} notation where n is the ordinal of the item to replace the token.
    • bb-template-item — An attribute that specifies an element to be placed in the template, where the nth template item is placed at the {n} location in the template.


{{templateCtrl.number1}} {{templateCtrl.number2}}


<div ng-controller="TemplateTestController as templateCtrl">
  <span bb-template="templateCtrl.template">
    <strong bb-template-item style="font-size: 18px;">{{templateCtrl.number1}}</strong>
    <strong bb-template-item style="font-size: 16px;">{{templateCtrl.number2}}</strong>


/*global angular */
(function () {
    'use strict';

    function TemplateTestController() {
        var self = this;
        self.template = '{0} is an important number. {1} is important, too, but not as important as {0}.';

        self.number1 = '39,210';
        self.number2 = '78';

    angular.module('stache').controller('TemplateTestController', TemplateTestController);