Prevent md-switch toggle clicking line - angularjs

Question

I'm using md-switch to display a toggle inside of an Angular app. When I click the line it's on, anywhere, the switch toggles. But I've got the switch on a line with other controls so I only want it to toggle when the actual switch is clicked, not some content outside it. How do I instruct it to behave like this?
Snippet:
<md-list-item class="md-1-line" ng-repeat="rule in vm.rules | filter:{name:groupedRule.name}">
<div style="width: 40px;">{{rule.threshold}}</div>
<div flex>
<md-slider min="10" max="40" ng-model="rule.threshold">
</md-slider>
</div>
<div style="width: 40px;">
<md-switch ng-model="rule.enabled"></md-switch>
</div>
Update
Here's a code pen demonstrating the issue: http://codepen.io/jsiegmund/pen/repwyR
Update
Issue #7937 on GitHub: https://github.com/angular/material/issues/7937#issuecomment-207793522

Answer 1

As of current date, the correct solution to this issue is to add class like this:
<md-list-item class="md-no-proxy">
This will prevent the entire line of list item to be clickable.
md-list-item documentation link

Answer 2

You could replace md-list-item with a div - CodePen
Markup
<div ng-controller="SwitchDemoCtrl" ng-app="MyApp">
<md-list>
<div layout="row" layout-align="center center">
<div style="width: 40px;"> {{ data.threshold }} </div>
<div flex>
<md-slider min="10" max="30" step="1" ng-model="data.threshold">
</md-slider>
</div>
<div layout-align="end center" flex-offset="5">
<md-switch ng-model="data.cb1" aria-label="Switch 1">
Switch 1: {{ data.cb1 }}
</md-switch>
</div>
</div>
</md-list>
</div>