Any way to get radio buttons to work in a nested button group?

[jonasjancarik]

I am trying to get a dropdown with radio buttons to work as a nested group, but it doesn't seem to work. Visually, the dropdown works, but the state doesn't change (i.e. selection doesn't happen) and the label neither.

I tried to track it down but all I figured out is that the proto.change function doesn't even seem to be called.

Here is my code, simplified:

<div class="form-group">
<label>Group label</label><br>
  <div class="btn-group" role="group" aria-label="..." data-toggle="buttons">
    <label class="btn btn-primary">
      <input type="radio" class="btn btn-default" name="endpoint" value="AAAvalue">
      AAA
    </label>
    <label class="btn btn-primary">
      <input type="radio" class="btn btn-default" name="endpoint" value="BBBvalue">
      BBB
    </label>

<!-- here is the dropdown -->
    <div class="btn-group">
      <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle" id="list-dropdown-button">
        <span class="glyphicon glyphicon-list" aria-hidden="true"></span>
        Select from this dropdown <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li><input type='radio' id='list-ccc' name='list' value='CCCvalue'><label for='list-ccc'>CCC</label></li>
        <li><input type='radio' id='list-bbb' name='list' value='BBBvalue'><label for='list-bbb'>BBB</label></li>
      </ul>
    </div>

  </div>
</div>

Is there something I am doing wrong?