Focus Label when Input is focussed with angular
<p>I have a webpage which uses radio button labels as buttons, with inputs hidden</p>

<pre class="lang-html prettyprint-override"><code>&lt;li ng-repeat="amount in amounts | orderBy: amount" ng-mouseenter="$parent.hoverPrompt = $parent.amounts[$index].donationPrompt" ng-mouseleave="$parent.hoverPrompt = null"&gt;
  &lt;input type="radio" name="amount_{{amount.suggestedAmount}}" id="donate_{{amount.suggestedAmount}}" ng-value="{{amount.suggestedAmount}}" ng-model="donate.amount" string-to-number /&gt;
  &lt;label class="as-button" for="donate_{{amount.suggestedAmount}}"&gt;${{amount.suggestedAmount}}&lt;/label&gt;
&lt;/li&gt;
</code></pre>

<p>I want my labels to be visibly highlighted when they or their associated hidden inputs are tabbed over. </p>

<p>I found a ready <a href="https://css-tricks.com/snippets/jquery/highlight-related-label-when-input-in-focus/" rel="nofollow">jquery snippet</a> but would prefer to do it in angular.</p>