Просто отобразите его как обычный HTML, но скройте его с помощью ng-show / ng-if.
Затем откройте его при наведении курсора с помощью ng-mouseover + ng-mouseleave.
Вот самое простое демо:
.ellipsis {
content: attr(data-title);
overflow: visible;
text-overflow: inherit;
background: #191919;
position: absolute;
border-radius: 0.4rem;
padding: 0 .5rem;
white-space: normal;
word-wrap: break-word;
display: block;
color: white;
z-index: 1;
font-size: 12px;
margin-right: 13px;
opacity: 1.1;
margin-top: 0rem;
visibility: visible;
}
<!DOCTYPE html>
<html ng-app>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div>
<input ng-model="i" ng-mouseover="a=true" ng-mouseleave="a=false" />
<div class="ellipsis" ng-if="a"><b>Hypertext</b> Markup Language</div>
<br>
<br>
<input ng-model="ii" ng-mouseover="aa=true" ng-mouseleave="aa=false" />
<div class="ellipsis" ng-if="aa"><b>Hypertext</b> Markup Language</div>
<br>
<br>
<input ng-model="iii" ng-mouseover="aaa=true" ng-mouseleave="aaa=false" />
<div class="ellipsis" ng-if="aaa"><b>Hypertext</b> Markup Language</div>
<br>
<br>
</div>
</body>
</html>