AngularJS - Multiple {{ }} in title attribute in TD element

Question

I have a problem to display a tooltip with the title attribute with AngularJS with multipe {{ }}. I'm making kind of a calendar.

I have this :

        <tr ng-repeat="horaire in triPlan(planning)">
            <td>A</td>
            <td class="abraca" ng-click="selectionHoraire(horaire)" ng-repeat="rdv in horaire" data-toggle="tooltip" data-placement="left" 
            title="{{rdv.nom}} is {{rdv.age}} year old">{{rdv.nom}}</td>
        </tr>

But when I hover the TD element, it displays this " {{rdv.nom}} is {{rdv.age}} year old ". And if I put only one {{ expression }} in the title attribute, it works perfectly.

How put multiple {{ }} expressions in this title attribute ?

UPDATE : PROBLEM SOLVED

You can see in the answers and comments below that I use the 1.6.4 AngularJS Version.

The ng-attr-title don't work for me in a ng-repeat itself inside a ng-repeat . So, I don't know really why but after some tests, I put this line code :

<script src="https://code.angularjs.org/1.2.9/angular.min.js"></script>

And I was surprised to see that it works !! title="{{rdv.nom}} is {{rdv.age}} year old">{{rdv.nom}}

There some differences between the version, I don't know why in a older version it works and in a newer it doesn't.

FINALLY the result to make it works, thanks to @georgeawg. It's to combine the two or more interpolation in only one (The text is in French, don't worry) :

title="{{rdv.nom+' a l\'âge :  '+rdv.age+' et vient pour : '+rdv.text}}"

Thanks everyone !

Answer 1

Use ng-attr-title . From the angularJS documentation :

Web browsers are sometimes picky about what values they consider valid for attributes.

If an attribute with a binding is prefixed with the ngAttr prefix (denormalized as ng-attr-) then during the binding it will be applied to the corresponding unprefixed attribute. This allows you to bind to attributes that would otherwise be eagerly processed by browsers...

<td class="abraca" ng-click="selectionHoraire(horaire)" 
    ng-repeat="rdv in horaire" data-toggle="tooltip" data-placement="left" 
        ng-attr-title="{{rdv.nom}} is {{rdv.age}} year old">{{rdv.nom}}</td>

Answer 2

Ok, I found out something thanks to @Dragos Paul Marinescu redirection question.

I found out that if I use the angular.js of the version 1.6.4. The tooltip don't display correctly, but if I use the angular.min of the version 1.2.9, its works perfectly...

I had this :

<script type="text/javascript" src="angular.js"></script>

And if I add this in my HTML :

<script src="https://code.angularjs.org/1.2.9/angular.min.js"></script>

Now it works perfectly... Thanks...But I really don't understand why it makes this. Why a higher version don't make the tooltip works ? And it's a dirty way I think to put this two lines together to make my app works...

Answer 3

Combine the two interpolations into one:

<!-- BEFORE
<tr ng-repeat="horaire in triPlan(planning)">
    <td>A</td>
    <td class="abraca" ng-click="selectionHoraire(horaire)" ng-repeat="rdv in horaire" data-toggle="tooltip" data-placement="left" 
    title="{{rdv.nom}} is {{rdv.age}} year old">{{rdv.nom}}</td>
</tr>
-->

<!--AFTER -->
<tr ng-repeat="horaire in triPlan(planning)">
    <td>A</td>
    <td class="abraca" ng-click="selectionHoraire(horaire)" ng-repeat="rdv in horaire" data-toggle="tooltip" data-placement="left" 
    title="{{rdv.nom+' is '+rdv.age+' year old'}}">{{rdv.nom}}</td>
</tr>

For more information, see AngularJS Developer Guide - Expressions