Angular is compiling a expression that shouldn't

Question

I'm just learning Angular and started with expressions.

I have the following code:

<div class="row" ng-app="">
    <div class="col-md-4">
        <p>
            **Example {{ 5 + 5 }}**
        </p>
        <div>
            <p>My first expression: {{ 5 + 5 }}</p>
        </div>
    </div>
    <div class="col-md-4">
        <p>
            **Example {{ firstName + ' ' + lastName }}**
        </p>
        <div ng-init="firstName='Daniel';lastName='Vieira Costa'">
            <p>My first expression: {{ firstName + ' ' + lastName }}</p>
        </div>
    </div>
</div>

My problem is that Angular is compiling a text that shouldn't compile. For each test, I have the following

** Example**

element. How to disable that to be compiled by Angular?

I want to show only the text, not the result.

Answer 1

You can make use of ngNonBindable directive by just adding the ng-non-bindable to the element that you don't want to be binded.

Consider this example:

    <p ng-non-bindable>
        **Example {{ 5 + 5 }}**
    </p>
    <div>
        <p>My first expression: {{ 5 + 5 }}</p>
    </div>