How to apply something to an element but not its children, in an Angular directive

Question

In my Angular project, I have a recursive template that creates a series of "blocks" (each consisting of an encompassing div with other elements inside it) nested a few levels deep - similar to this one:

<script type="text/ng-template" id="myTemplate.html">
     <div drop-target='true' class="overall">         
          <h2> {{obj.title}} </h2>
          <div> {{obj.content}} </div>
          <div ng-include="'myTemplate.html'" onload="obj=someObject.innerObjects"></div>
    </div>
</script>

Each of these overall divs has a directive that lets it accept items that are dragged into it (standard drag and drop).

The problem is, that the dropping is also being allowed to happen onto the <h2> element and the content div. This is not what I want. I want the dropping to only be over the overall div.

Any ideas on how to do that?