Radio Button Conflict between Bootstrap And Angular js

Question

<!-- Container -->
<div class="container">

  <div class="row">
    <div class="col-lg-12">
      <div class="page-header text-center">
        <h2>Radio Button Conclict between Bootstrap And Angular</h2>
      </div>
    </div>
  </div>

  <div class="row">
    <!-- With data-toggle -->
    <div class="col-lg-6">

      <div class="row">
        <h4 class="col-lg-12">
          This has data-toggle property
        </h4>
      </div>

      <div class="btn-group row" data-toggle="buttons">
        <label class="btn btn-primary">
          <input type="radio" data-ng-model="selection" name="options" value="option1" />
          <span>Option 1</span>
        </label>
        <label class="btn btn-primary">
          <input type="radio" data-ng-model="selection" name="options" value="option2" />
          <span>Option 2</span>
        </label>
        <label class="btn btn-primary">
          <input type="radio" data-ng-model="selection" name="options" value="option3" />
          <span>Option 3</span>
        </label>
      </div>

      <div class="row">
        <div class="col-lg-6">
          <p>Model: {{selection | json}}</p>
        </div>
      </div>

    </div>
    <!--/ With data-toggle -->

    <!-- Without data-toggle -->
    <div class="col-lg-6">

      <div class="row">
        <h4 class="col-lg-12">
          This has NOT data-toggle property
        </h4>
      </div>

      <div class="btn-group row">
        <label class="btn btn-primary">
          <input type="radio" data-ng-model="selection2" name="options" value="option1" />
          <span>Option 1</span>
        </label>
        <label class="btn btn-primary">
          <input type="radio" data-ng-model="selection2" name="options" value="option2" />
          <span>Option 2</span>
        </label>
        <label class="btn btn-primary">
          <input type="radio" data-ng-model="selection2" name="options" value="option3" />
          <span>Option 3</span>
        </label>
      </div>

      <div class="row">
        <div class="col-lg-6">
          <p>Model: {{selection2 | json}}</p>
        </div>
      </div>

    </div>
    <!--/ Without data-toggle -->

  </div>

</div>
<!--/ Container -->

" data-toggle="buttons" " tag does not allow the angular js to work properly as u can u see in this plnkr example too.. but if i remove then its working fine..

but i want ot keep it as it is..

http://plnkr.co/edit/l36UgnR7kltphXdEQLCk?p=preview

Answer 1

By hiding the radio buttons using the data-toggle="button" attribute on the btn-group , bootstrap is not allowing the click event to propagate down to the radio input. You can counter this effect by adding ng-click bindings to the .btn elements.

<div class="btn-group row" data-toggle="buttons">
    <label class="btn btn-primary" ng-click="selection = 'option1'">
      <input type="radio" data-ng-model="selection" name="options" value="option1" />
      <span>Option 1</span>
    </label>
    <label class="btn btn-primary" ng-click="selection = 'option2'">
      <input type="radio" data-ng-model="selection" name="options" value="option2" />
      <span>Option 2</span>
    </label>
    <label class="btn btn-primary" ng-click="selection = 'option3'">
      <input type="radio" data-ng-model="selection" name="options" value="option3" />
      <span>Option 3</span>
    </label>
</div>

PS. the reason you'll notice that clicking the top set of radio affects the bottom set is because they have the same name attribute. Change this as needed and you'll notice that each group works correctly/independently of the other

Answer 2

Because of same name for input this is happening.

  <div class="row">
    <div class="col-lg-12">
      <div class="page-header text-center">
        <h2>Radio Button Conclict between Bootstrap And Angular</h2>
      </div>
    </div>
  </div>

  <div class="row">
    <!-- With data-toggle -->
    <div class="col-lg-6">

      <div class="row">
        <h4 class="col-lg-12">
          This has data-toggle property
        </h4>
      </div>

      <div class="btn-group row" data-toggle="buttons">
        <label class="btn btn-primary">
          <input type="radio" data-ng-model="selection" name="group1" value="option1" />
          <span>Option 1</span>
        </label>
        <label class="btn btn-primary">
          <input type="radio" data-ng-model="selection" name="group1" value="option2" />
          <span>Option 2</span>
        </label>
        <label class="btn btn-primary">
          <input type="radio" data-ng-model="selection" name="group1" value="option3" />
          <span>Option 3</span>
        </label>
      </div>

      <div class="row">
        <div class="col-lg-6">
          <p>Model: {{selection | json}}</p>
        </div>
      </div>

    </div>
    <!--/ With data-toggle -->

    <!-- Without data-toggle -->
    <div class="col-lg-6">

      <div class="row">
        <h4 class="col-lg-12">
          This has NOT data-toggle property
        </h4>
      </div>

      <div class="btn-group row">
        <label class="btn btn-primary">
          <input type="radio" data-ng-model="selection2" name="options" value="option1" />
          <span>Option 1</span>
        </label>
        <label class="btn btn-primary">
          <input type="radio" data-ng-model="selection2" name="options" value="option2" />
          <span>Option 2</span>
        </label>
        <label class="btn btn-primary">
          <input type="radio" data-ng-model="selection2" name="options" value="option3" />
          <span>Option 3</span>
        </label>
      </div>

      <div class="row">
        <div class="col-lg-6">
          <p>Model: {{selection2 | json}}</p>
        </div>
      </div>

    </div>
    <!--/ Without data-toggle -->

  </div>

</div>
<!--/ Container -->

http://plnkr.co/edit/chzO8o7gx2STGkyQ8SNK?p=preview