Bootstrap 3 Tooltips with Angular

Question

I'm attempting to use Boostrap 3 tooltips with Angular JS so that the tooltip displays the value of an object in the Angular scope. This works fine when the page loads, but when the value of the object in the scope is updated the tooltip still displays the original value.

HTML:

<div ng-app>
<div ng-controller="TodoCtrl">
    <span data-toggle="tooltip" data-placement="bottom" title="{{name}}">Hello {{name}}</span>
    <button type="button" ng-click="changeName()">Change</button>
</div>

Javascript:

function TodoCtrl($scope) {
    $scope.name = 'Ian';
    $scope.changeName = function () {
        $scope.name = 'Alan';
    }
}

$(document).ready(function () {
    $('span').tooltip();
});

There's an example demonstrating my code so far and the issue in this Fiddle

Answer 1

Instead of:

<span data-toggle="tooltip" data-placement="bottom" title="{{name}}">Hello {{name}}</span>

Use:

<span data-toggle="tooltip" data-placement="bottom" data-original-title="{{name}}">Hello {{name}}</span>

Bootstrap Tooltip first checks data-original-title, so as long as you keep this value updated, you'll be fine. Check out this working Fiddle