Edit in JSFiddle

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

app.directive('appDirective', function(){
	return {
		restrict: 'E',
		replace: true,
		template: '<ul>' +
        '<li ng-repeat="country in countriesList | filter:search">' +
			'<a href="#" ng-click="viewCountryDetails(country);">{{country.name}}</a>' +
			'</li></ul>',
		link: function($scope) {
			$scope.viewCountryDetails = function(country){
                $scope.detailedInfo = 'Country: ' + country.name +
                    '; capital: ' + country.capital + 
                    '; population: ' + country.population;
			}
		}
	}
});

app.controller('appController', function($scope){
	$scope.countriesList = [
        {name: 'Germany', capital: 'Berlin', population: '81,305,856'},
		{name: 'France', capital: 'Paris', population: '65,630,692'},
		{name: 'Italy', capital: 'Rome', population: '61,261,254'},
		{name: 'Spain', capital: 'Madrid', population: '47,042,984'},
		{name: 'United Kingdom', capital: 'London', population: '63,047,162'}
	];
});

<section ng-app="app" class="well">
    <div ng-controller="appController">
        <input type="search" ng-model="search" placeholder="type to filter..." />
        <app-directive></app-directive>
        <h4>{{ detailedInfo }}</h4>
    </div>
</section>