bootstrap tooltip and angularJs

Question

I'm using the bootstrap-tooltip and angularJs for display tooltip.

I am using the following code for display tooltip :

<div class="input-group">
   <input valid-number ng-model="gotoPageInput" ng-class="{notValidPageNumber: gotoPageInput > totalPage || gotoPageInput<1}" ng-keyup="gotoPage($event,(gotoPageInput>=1 && gotoPageInput<=totalPage))" type="text" class="form-control goToPage " style="width: 70px">
   <button rel="tooltip" title="{{gotoPageInput}}" class="btn btn-default goToPage" ng-class="{disabled: gotoPageInput > totalPage || gotoPageInput<1}" ng-click="gotoPage($event,true)" type="button">go</button>
</div>

The first time it works properly Like the picture below :

See what happens when I change the value from 4 to 5 :

why ? Two tooltip Displays.Browser tooltip is correct but bootstrap tooltip is Wrong.

Answer 1

You can use angular-ui bootstrap's tooltip instead of using the jquery tootltip that twitter bootstrap is using.

See this plunker

HTML

<div class="btn btn-default" tooltip="{{text}}">Go</div>
<input type="text" ng-model="text">