Upon clicking an element, a function is executed which, upon successful completion, should change the tooltip of that specific element.
Within an ngRepeat loop, I have multiple elements displaying the same tooltip. However, I only want to update the tooltip for the element that was clicked. Currently, the tooltip is being displayed as an interpolated string from the controller, and after the function succeeds, this string is being updated. This results in every element with the same tooltip being updated, not just the one that was clicked.
<div ng-repeat="n in auctions">
<img src="img/heart_icon.png"
alt="Add to wishlist"
class="category__record-button--wishlist-icon"
data-ng-if="$parent.authentication.isAuth"
data-ng-click="addFollowAuction(n.id)"
uib-tooltip="{{ categoryConfig.followInfo }}"
tooltip-placement="top"
tooltip-trigger="'mouseenter'"
tooltip-append-to-body="true">
</div>
The categoryConfig.followInfo variable contains the string mentioned earlier, and it gets updated after the addFollowAuction() function succeeds:
$scope.addFollowAuction = function (auctionId) {
console.log(auctionId);
auctionsFollowService.addFollowAuction(auctionId)
.then(function (response) {
if(response.detail === 'success follow') {
$scope.categoryConfig.followInfo = 'Item successfully added to wishlist!';
}
}, function (err) {
console.log('Error adding to wishlist ' + err);
});
};
Subsequently, all images within the loop display the new tooltip information, even though I only want the clicked element to show it. I attempted using $event, but it did not work since the $scope.categoryConfig.followInfo was being changed regardless.
How can I attach the new tooltip information solely to the clicked element?