Show and hide elements of ng-repeat cycle - angularjs

Question

Here is my HTML:
<ul class="no-bullet">
<li ng-repeat="(group, count) in info.info">
<a href="#" ng-click="getQuestions(group)"
ng-mouseenter="showGroupPanel()" ng-mouseleave="hideGroupPanel()"
>{{group}} ({{count}}) </a>
<div class="group_panel" ng-show="hoveringGroup">
<i class="fa fa-check"></i>
<i class="fa fa-folder-o"></i>
</div>
</li>
And here is my JS:
$scope.hoveringGroup = false;
$scope.showGroupPanel = function() {
$scope.hoveringGroup = true;
}
$scope.hideGroupPanel = function() {
$scope.hoveringGroup = false;
}
When user mouseover one of elements of the list additional div (group_panel) is displayed. But it is displayed for all elements of the list. How can I fix it to display "group-panel" div only for one element (mouseovered) of the list?

Answer 1

Simplest way : use ng-repeat's isolate scope. (hoveringGroup will be a separate variable for each ng-repeat iteration)
<ul class="no-bullet">
<li ng-repeat="(group, count) in info.info">
<a href="#" ng-click="getQuestions(group)"
ng-mouseenter="hoveringGroup = true" ng-mouseleave="hoveringGroup = false"
>{{group}} ({{count}}) </a>
<div class="group_panel" ng-show="hoveringGroup">
<i class="fa fa-check"></i>
<i class="fa fa-folder-o"></i>
</div>
</li>
You could also store the information in your repeated item :
<ul class="no-bullet">
<li ng-repeat="info in info.info">
<a href="#" ng-click="getQuestions(info.group)"
ng-mouseenter="showGroupPanel(info)" ng-mouseleave="hideGroupPanel(info)"
>{{info.group}} ({{info.count}}) </a>
<div class="group_panel" ng-show="info.hoveringGroup">
<i class="fa fa-check"></i>
<i class="fa fa-folder-o"></i>
</div>
</li>
$scope.showGroupPanel = function(info) {
info.hoveringGroup = true;
}
$scope.hideGroupPanel = function(info) {
info.hoveringGroup = false;
}

Answer 2

var app = angular.module('app', []);
app.controller('homeCtrl', function($scope) {
$scope.info = {
info: [{
id: 1
}, {
id: 2
}, {
id: 3
}
]
}
$scope.hoveringGroup = false;
$scope.showGroupPanel = function(level) {
level.hoveringGroup = true;
}
$scope.hideGroupPanel = function(level) {
level.hoveringGroup = false;
}
$scope.createlevel = function(count, level) {
return angular.copy(count, level)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<div ng-app="app">
<div ng-controller="homeCtrl">
<ul class="no-bullet">
<li ng-repeat="(group, count) in info.info" ng-init="level =createlevel(count,level)">
{{group}} ({{count}})
<div class="group_panel" ng-show="level.hoveringGroup">
<i class="fa fa-check"></i>
<i class="fa fa-folder-o"></i>
</div>
</li>
</ul>
</div>
</div>