angular hide when !element clicked - angularjs

Question

I'm rendering some td's inside a ng-repeated tr with a directive attribute. For each iteration there are two tr's, the second is initially hidden, until the user clicks the first tr. The revealed tr is correctly hidden when another tr is clicked. However, I need the revealed tr to be hidden when clicking anywhere outside the currently displayed tr's, not just other tr's. This isn't working in my directive because each time a click event is fired the documentClickHandler function is evaluated for each ng-repeat iteration i.e., the first eventOutsideTarget may evaluate to true but the others are false, so the closePreview() function is always called. Any ideas?
<tr ng-repeat-start="campaign in vm.campaignData track by campaign.id" ng-click="vm.showCampaignPreview(campaign)" campaign-item campaign="campaign" campaign-options="vm.campaignOptions" close-preview="vm.hideCampaignPreview()">
</tr>
<tr ng-class-odd="'odd'" ng-class-even="'even'" ng-repeat-end ng-show="vm.selectedCampaign.id == campaign.id">
<td colspan="8">{{ campaign.description }}</td>
</tr>
// directive
(function(){
'use strict';
angular.module('campaignApp')
.directive('campaignItem', ['$document', "$parse", function ($document, $parse) {
return {
restrict: 'A',
scope: {
campaign: '=',
campaignOptions: '=',
closePreview: '&'
},
controller: 'vsmsCampaignsController',
templateUrl: 'campaign.tpl.html',
link: function(scope, element, attr, controller) {
var documentClickHandler = function (event) {
var eventOutsideTarget = (element[0] !== event.target.parentElement) && (0 === element.find(event.target.parentElement).length);
if (eventOutsideTarget) {
scope.$apply(function () {
scope.closePreview();
console.log('close preview');
});
}
};
$document.on("click", documentClickHandler);
scope.$on("$destroy", function () {
$document.off("click", documentClickHandler);
});
}
};
}]);
})();
// campaign.tpl.html
<td>{{ campaign.name }}</td>
<td>{{ campaign.priority }}</td>
<td>{{ campaign.status }}</td>
<td>{{ campaign.createdBy }}</td>
<td>{{ campaign.approvedBy }}</td>
<td>{{ campaign.releaseDate * 1000 | date:'short' }}</td>
<td>{{ campaign.expirationDate * 1000 | date:'short' }}</td>
<td>
<select ng-init="selectedOption = campaignOptions[0]" name="campaignOption" class="form-control" ng-model="selectedOption" ng-options="option.name for option in campaignOptions track by option.value">
</select>
</td>