How to get clickable button inside form label in radio control - html

Question

I want to have a radio group where each label contains a clickable icon on the right that does NOT select the element, only executes a click event. Clicking on any other area within the label should select that item in the radio group. But clicking on the icon should ONLY execute that code.
The problem is that the <label> assumes all control of any click within its area. I have adjusted x-indexes and simply can't get the icons to be clickable without also selecting the item in the radio group. I am using angularjs and ionic framework.
<label class="item-button-right item item-radio" >
<input type="radio" name="radio-group">
<div class="item-content disable-pointer-events" >
<span>My Radio Button</span>
<button ng-click="doSomething(); $event.stopPropagation();" class="button button-icon radio-button">
<i class="button-icon icon ion-ios-information-outline"></i><i class="icon ion-ios-arrow-right"></i>
</button>
</div>
<i class="radio-icon disable-pointer-events icon ion-checkmark"></i>
</label>

Answer 1

If i understood you correclty, then you can add a ng-click option in the ng-repeat. Then just pass in the scope name and do stuff with that. Example
Html Example
<h5>Your group</h5>
<ul class="list-group" ng-repeat="obj in objs">
<li class="list-group-item">
{{obj.name}}
<button class="btn btn-primary btn-xs" data-title="View" data-toggle="modal" data-target="#view" ng-click="Dosomething(obj.name)"><span class="glyphicon glyphicon-pencil"></span></button>
<input type="radio" ng-model="color.name" ng-value="specialValue">
<input type="radio" ng-model="color.name" value="red">
color = {{color.name | json}}
</li>
</ul>
script example
app.controller('ExampleController', ['$scope', function($scope) {
$scope.color = {
name: 'blue'
};
$scope.specialValue = {
"id": "12345",
"value": "green"
};
$scope.Dosomething = function(name) {
alert("MyName");
};
}]);

Answer 2

You can also take the css positioning route by moving the button/icon html out of the label, then use css to preposition it where you need it. kind of like in this fiddle: https://jsfiddle.net/nwx9kzw1/
Here's some sample css to get the job done:
.special-icon-class{
position:relative;
z-index: 999;
top:1px;
left:25px;
}