angular.module('demo', []) .directive('imageShower', function () { return { restrict: 'E', template: [ '<div>', '<ul>', '<li ng-repeat="user in ctrl.users" ng-click="ctrl.showPictureOf(user)">', '{{ user.name }} is {{ user.age }} years old.', '</li>', '</ul>', '<div ng-if="ctrl.currentPerson">', '<img ng-src="{{ctrl.currentPerson.img}}" width="200">', '</div>', '</div>'].join(''), controllerAs: 'ctrl', controller: function () { var ctrl = this; ctrl.users = [{ name: 'Jilles', age: 21, img: 'https://scontent-fra3-1.xx.fbcdn.net/hphotos-xap1/v/t1.0-9/11027476_904378516319980_2541952383731227792_n.jpg?oh=c00ad4b914b96f8364c6cddc52eb8928&oe=56F68F2A' }, { name: 'Todd', age: 24, img: 'https://scontent-fra3-1.xx.fbcdn.net/hphotos-xpf1/v/t1.0-9/12289484_926596704092760_3553550773099720502_n.jpg?oh=de83d4237236b2915f40df3e8b225999&oe=56D6002E' }, { name: 'Lisa', age: 18, img: 'https://scontent-fra3-1.xx.fbcdn.net/hphotos-xpf1/v/t1.0-9/12196132_1233527680006580_5429755012807710307_n.jpg?oh=3f9d12c96ca01fb68f0457128e79b764&oe=56E1DFA8' } ]; // for clarity, we don't need this ctrl.currentPerson = null; ctrl.showPictureOf = function (person) { ctrl.currentPerson = person; } } }; });
<div ng-app="demo"> <image-shower></image-shower> </div>
ul li:hover { cursor: pointer; }