Bootstrap 3 Tooltips with Angular

Question

I am trying to use Boostrap 3 tooltips with Angular JS so that the tooltip displays the value of the object in the Angular area. This works great when the page loads, but when the value of the object in the area 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();
});

Here is an example demonstrating my code so far, and the problem is this Fiddle

Answer 1

Instead:

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

Using:

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

Bootstrap Tooltip data-original-title, , , . Fiddle

Answer 2

, , angular . angular ui bootstrap .

http://angular-ui.imtqy.com/bootstrap/

, jquery, .

EDIT: :

$('span').tooltip('hide')
      .attr('data-original-title', $scope.name)
      .tooltip('fixTitle');

, , angular, .