In-place Editing of Angular Material Checkbox Label - angularjs

Question

The following code gives me a checkbox with a label:
<md-checkbox ng-model="data.foo">
This Label should be editable
</md-checkbox>
Actual state: I can (un)check the box by clicking either the box itself or clicking on the label. The cursor is a pointer over the entire box-label-line.
Desired state: I can (un)check the box only by clicking on the box itself. When hovering the label, cursor should become a text cursor and clicking on it should offer in-place editing.
How can I achieve this?

Answer 1

Modify the html like this:
<div ng-app="sandbox" class="ng-scope">
<md-checkbox ng-model="data.label" aria-label="Editable label" role="checkbox" class="ng-valid md-default-theme ng-dirty ng-valid-parse ng-touched md-checked" tabindex="0" aria-checked="true" aria-invalid="false" style="">
<div class="md-container" md-ink-ripple="" md-ink-ripple-checkbox="">
<div class="md-icon"></div>
<div class="md-ripple-container"></div>
</div>
</md-checkbox>
<div ng-transclude="" class="md-label" style="display: inline-block;">
<span class="ng-scope">
This label should be editable
</span>
</div>
</div>
Modify the css class md-checkbox, note the display value and the width value.
md-checkbox {
box-sizing: border-box;
display: inline;
margin: 8px;
white-space: nowrap;
cursor: pointer;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding-left: 18px;
padding-right: 0;
position: relative;
line-height: 26px;
min-width: 18px;
min-height: 18px;
width: 18px;
}