How to display image on mouseover above the respective filename - angularjs - html

Question

I am able to display file image and title on mouseovering for respective file. But for all filename the image and title is displaying in same place.
I need to display the respective image and title on above of respective filename. When page gets loaded I saw this small box. I don't know why.
After moving mouseover on first filename or second filename it will display the image and title in the same place as below.
HTML :
<style>
.hover-image {
width: 30px;
height: 30px;
border-radius: 20%;
position: absolute;
margin-top: -10px;
margin-left: 5px;
}
img.hover-image {
border: none;
box-shadow: none;
}
.hover-title {
color:black;
position: absolute;
margin-top: -20px;
}
</style>
<div class="file-image-tags1">
<ul>
<span style="width: 200px;"><a ng-show="hideHoveredImage==false;" class="hover-title">{{hoverTitle}}<img class="hover-image" src="{{hoveredImage}}"></a></span>
<li ng-repeat="image in files | filter :'image'" >
<div class="file-tag-baloon1" ng-mouseover="hoverImg(image.id)" ng-mouseleave="hoverOut()">
<span>
<a ng-click="photoPreview(image.id);" >{{image.fileshortname}}</a>
</span>
<span><a ng-click="removeImage(image.id)" class="remove1">X</a></span>
</div>
</li>
</ul>
</div>

Answer 1

Use the angular built in directives,
Check out the below code
HTML
<span ng-hide="show">
<img ng-src="https://unsplash.it/200/300/?random" />
</span>
<br/>
<span ng-mouseover="show=!show" ng-mouseleave="show=!show">
Image name </span>
Angular Controller
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.show="false";
});
Update 1:
Based on the comment I updated as below
Angular Controller
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.show = "false";
$scope.arrayofJson = [{
imageTitle: "someImageName1",
imagePath: "http://lorempixel.com/400/200/",
show: "false"
}, {
imageTitle: "someImageName2",
imagePath: "https://unsplash.it/200/300/?random",
show: "false"
}, {
imageTitle: "someImageName3",
imagePath: "https://unsplash.it/200/300/?random",
show: "false"
}, {
imageTitle: "someImageName4",
imagePath: "https://unsplash.it/200/300/?random",
show: "false"
}
];
});
HTML
<div ng-repeat="item in arrayofJson">
<span ng-hide="item.show">
<img ng-src="{{item.imagePath}}" /> </span>
<br/>
<span ng-mouseover="item.show=!item.show" ng-mouseleave="item.show=!item.show">
{{item.imageTitle}} </span>
</div>
The plunker remains the same and it is updated. Check out the LIVE DEMO

Answer 2

Try -
.file-image-tags1
{
position : absolute;
}

Answer 3

You can do this using ng-if ng-show/hide like below example.
$scope.hoverIn = function(){
this.hoverImage = true;
};
$scope.hoverOut = function(){
this.hoverImage = false;
};
<ul>
<span ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()">Hover Me</span>
<span ng-show="hoverImage">
<img>.....</a>
</span>
</li>
</ul>
in function you can pass the file name and you can do much more