bootstrap工具提示和angularJs

Question

我正在使用bootstrap-tooltip和angularJs来显示工具提示。

我使用以下代码显示工具提示：

<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>

第一次正常工作如下图所示：

看看当我将值从4更改为5时会发生什么：

为什么？两个工具提示Displays.Browser工具提示是正确的，但bootstrap工具提示是错误的。

Answer 1

您可以使用 angular-ui bootstrap 的工具提示，而不是使用Twitter bootstrap正在使用的jquery工具提示。

<强> See this plunker

<强> HTML

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