I have a
<div class="outer" ng-click="toggle()">
<div class="inner">You can click through me</div>
You have to cancel event propagation, so the click event of the parent element won't get called. Try:
<div class="outer" ng-click="toggle()"> <div class="inner" ng-click="$event.stopPropagation()">You can click through me</div> </div>
When you click the child element, its event gets triggered. But it doesn't stop there. First the click event of the child element is triggered, then the click event of the parent element gets triggered and so on. That's called event propagation, To stop event propagation (triggering of the parents click events), you have to use the above function,
A working example: DEMO
I added some CSS padding, so the example is clearer. Without padding the child element takes up the whole inner space and you can not click on the parent without clicking on the child.