Limitations for the `angular-translate` directive when used on a label element with a nested input element

angular-translate-directive-on-label.md

This may be more of a misunderstanding with my knowledge of how HTML works rather than a bug in angular-translate:

When I create a <label> that wraps an <input>

<label translate="APP.PURCHASE_ORDER_DETAILS.PURCHASE_ORDER_DETAILS_DIALOG.VENDOR_ID_INPUT_LABEL">
  <input class="vendor-id-input" type="text">
</label>

The rendered HTML does not contain the input element

<label translate="APP.PURCHASE_ORDER_DETAILS.PURCHASE_ORDER_DETAILS_DIALOG.VENDOR_ID_INPUT_LABEL" class="ng-scope">Vendor ID</label>

However, if I use the angular-translate filter instead of the directive

<label>
  {{ 'APP.PURCHASE_ORDER_DETAILS.PURCHASE_ORDER_DETAILS_DIALOG.VENDOR_ID_INPUT_LABEL' | translate }}
  <input class="vendor-id-input" type="text"/>
</label>

The rendered DOM element appears as I would expect (i.e. with the <input> element still intact)

<label class="ng-binding"> Vendor ID <input class="vendor-id-input" type="text"> </label>

I can also get it to work properly if I create the <input> outside of the <label> and use the for attribute to link the two elements

<label for="vendor-id" translate="APP.PURCHASE_ORDER_DETAILS.PURCHASE_ORDER_DETAILS_DIALOG.VENDOR_ID_INPUT_LABEL"></label>
<input class="vendor-id-input" id="vendor-id" type="text">

---

TL;DR

Why am I not able to use the angular-translate directive on a <label> if an <input> element is nested inside?