My list contains items that are being repeated using ng-repeat details.
I want to be able to hover over one of the li elements and have the background of a div called background (which is outside of the ng-repeat) change to the url of the corresponding details item.
However, I'm not sure how to make the external element access the data from the ng-repeat.
Check out the plunkr code snippet for more details: https://plnkr.co/edit/lGRfE9YGYN645Ztpr94K?p=preview
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.details = [
{ "name": "Employees", "url":"https://i.pinimg.com/736x/76/47/9d/76479dd91dc55c2768ddccfc30a4fbf5--pikachu-halloween-costume-diy-halloween-costumes.jpg" },
{ "name": "Support", "url":"https://i.pinimg.com/736x/76/47/9d/76479dd91dc55c2768ddccfc30a4fbf5--pikachu-halloween-costume-diy-halloween-costumes.jpg" }
];
});
HTML:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85e4ebe2f0e9e4f7abeff6c5b4abb5abfd">[email protected]</a>" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="background">
<ul ng-repeat="detail in details">
<li>{{detail.name}}
</li>
</ul>
</div>
</body>
</html>