title: Angular.js closing with click anywhere but on the element
body: <p>It's pretty common thing, like if you click on inbox here here on stackoverflow. I'll be calling that dialog or whatever gets opened a <em>thing</em>. </p>
  
  <p>Now there are two ways I know of to deal with this, </p>
  
  <ol>
  <li>you create an invisible overlay where only the element you opened
  has bigger zindex, and you close your <em>thing</em> by clicking on the
  overlay</li>
  <li>click event on the document, and you check upon clicking whether you clicked on your thing or outside it, in which case you close your <em>thing</em>.</li>
  </ol>
  
  <p>In either case I'd ideally like to use <code>ng-class</code> to add/remove class that would show/hide the <em>thing</em>.</p>
  
  <p><strong>Now how would I do this with angular, so it could be used on any component(thing) I might add.</strong> It's not like I have single modal, I might have quite a few different components, with different html structure, positioning and stuff.</p>
  
  <p>Which approach would be better, document event, overlay or something completely else? </p>
  
  <p>Since angular doesn't really have any reference to dom, document approach could be a problem, right, since I can't quite check whether I'm clicking on the thing element? Unless I'd give every <em>thing</em> the same class..</p>
  
  <p>Overlay approach on the other hand doesn't require any reference to dom elements.</p>
  
  <p>Both approaches would need a unique var at rootScope for that <code>ng-class</code> to work.. which bring the question whether to use <code>ng-class</code> or something custom..</p>
  
  <p>Anyway just throwing my ideas out there, maybe I'm thinking about it wrong from the beginning, has anyone dealt with this before?</p>