title: Angular - Implementing event handler on button mouseup when mouse is not over the button
body: <p>I want to implement a Push To Talk button that enables voice when I mouse down, and disables voice when I release the mouse. Here's the code I have right now:</p>
  
  <pre><code>    &lt;button ng-mousedown="enablePushToTalk()" ng-mouseup="disablePushToTalk()" class="btn"&gt; PushToTalk &lt;/button&gt;
  </code></pre>
  
  <p>The problem scenario is this:</p>
  
  <ol>
  <li>User hits push to talk button (mouseDown: enablePushToTalk is called)</li>
  <li>User moves mouse away from button</li>
  <li>User releases mouse: mouseUp event is never called, thus disablePushToTalk is never called! So Push To Talk stays enabled.</li>
  </ol>
  
  <p>Here's a gif:</p>
  
  <p><a href="https://i.stack.imgur.com/nbKte.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nbKte.gif" alt="Buggy behavior"></a></p>
  
  <p>How do I ensure that "disablePushToTalk" gets called for every time that "enablePushToTalk" is called?</p>