Edit in JSFiddle

var app = angular.module('app', []);

app.directive('customList', function () {
    return {
        restrict: 'E',
        replace: true,
        template: '<ul><li ng-repeat="item in items">' +
            '<a href="#" ng-click="viewDetails(item)">{{item.title}}</a>' +
            '</li></ul>',
        link: function (scope) { // same as 'controller'
            scope.viewDetails = function (item, element) {
                console.log('clicked on ' + item.title);
                alert('clicked on ' + item.title);
            }
        },
        /*controller: function ($scope) { // same as 'link'
            $scope.viewDetails = function (item) {
                console.log('clicked on ' + item.title);
                alert('clicked on ' + item.title);
            }
        },*/
    }
});

app.controller('appController', function ($scope) {
    $scope.items = [{
        title: 'orange'
    }, {
        title: 'lime'
    }, {
        title: 'pineapple'
    }];
});

<section ng-app="app">
    <div ng-controller="appController">
        click on items in the list:
        <custom-list></custom-list>
    </div>
</section>