Is this the result you wanted?
JS:
angular
.module("app", [])
.value("actors", [
"John Doe",
"Doe Johns",
"Johnny Doe",
"Doe John"
])
.controller("ctrl", function ($scope, actors) {
$scope.actors = actors;
})
.directive("qtip", function ($compile, $templateCache) {
var clone = $compile($templateCache.get("bubble.html"));
function link (scope, el, attr) {
el.qtip({
position: {
at: "bottom left"
},
style: {
tip: {
corner: "top center"
}
},
content: {
text: function () {
return scope.$apply(function () {
return clone(scope);
});
}
}
});
}
return {
link: link,
scope: {
text: "=qtip"
}
};
});
HTML:
<script type="text/ng-template" id="bubble.html">
<div>
<div class="hoverInfo">
<div class="nameAndInfo withPresence">
<a href="#" class="name">{{text}}</a>
</div>
</div>
</div>
</script>
<ul ng-controller="ctrl">
<li
ng-repeat="actor in actors"
qtip="actor"
>{{actor}}</li>
</ul>