Dynamic tooltip on TD element with Bootstrap and AngularJS.

AngularJS v. 1.2.14, Bootstrap v3.3.4

I have a table in my HTML page and on a TD element I'd like to add a dynamic tooltip because in then InnerText there is the code of the User State and in the tooltip I want to see the description of the User State.

Obviously, in my page there is a Controller and others modules loaded by AngularJS that I don’t show for simplicity.

 This is my tip:

<tr ng-repeat="r in vm.userRoles">

...

<td title="{{vm.viewState(r)}}" tooltip-trigger="mouseenter" tooltip-placement="top">{{r.Stato}}</td>

...

</tr>

Then in my AngularJS Controller I’ve added this function

vm.states: it is an array of User State.

function ViewState(r) {

       var state = $filter('filter')(vm.states, { State: r.State })[0];

       if (state != undefined) {

              return state.Description;

       } else {

              return '';

              }           

       }

And these are the results: