Reset the scope using an onclick event with AngularJS

Question

I have a scope variable that gets set when a user clicks an element. I would simply like to change that variable to false when a user clicks outside the element. Common convention for modals or popup menus.

I have a plunker demonstrating my code and the problem. It's based off another plunker I started so it may seem extraneous but it is indicative of my exact issue.

http://plnkr.co/edit/O7YwaPci894XjX7XgsGe?p=preview

Answer 1

Add a ng-focus and a ng-blur directive to the element.

In order to use these directives on elements different than input, select, textarea, a first add a tabindex attribute to the element:

<p tabindex="0" data-ng-focus="setScopeVariable()" data-ng-blur="resetScopeVariable()">Click me!</p>