How to pass the data from a checked checkbox to a modal?

Question

I would like to know how to, when selecting a checkbox, take this data and launch it in a modal. In the code below, I want to take only the selected charters of a post and make appear only those selected in the modal. How do I? I tried to see in other tutorials, but I could not find something to help me. Thank you very much!

<div ng-repeat="charter in post.charters">
    <input type="checkbox" ng-model="charter.selected"> &nbsp; {{'{{charter}}'}}
</div>

<div class="modal fade textfield" id="updatePopUp">
     <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="exampleModalLabel" >Edit Post Components</h4>
     </div>
     <div class="modal-body">
     <form>
         <div class="form-group form-inline">
              <label for="txtComponent" class="control-label">Component:</label>
              <input type="text" class="form-control" ng-model="post.components" id="txtComponent" autocomplete="off" placeholder="Insert a component">
              <button ng-click="searchCharters(post.components)" type="button" class="btn btn-primary">See charters</button>
         </div>
     </form>
     <ul>
         <div ng-repeat="charter in post.charters">
             {{'{{charter}}'}}
         </div>
     </ul>
</div>

<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button ng-click="updatePost()" type="button" class="btn btn-primary">Update</button>
 </div>

Answer 1

function setaDadosModal(nome) {

  document.getElementById('nome_confirma').innerHTML = nome;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<td>


  <!-- Exemplo com botao para enviar os dados para o modal -->
  <a style="text-decoration: none" data-toggle="modal" data-target="#modal_confirmacao"><button  type="button" class="btn btn-block btn-danger" onclick="setaDadosModal('id do campo ou palavha')">Enviar para modal</button></a></td>







<!-- Modal -->
<div class="modal fade" id="modal_confirmacao" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header callout callout-danger">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title text-center">modal headero</h4>
      </div>
      <div class="modal-body">
        <h5 class="text-center">
          você enviou o campo <label value="nome_confirma" id="nome_confirma"></label>?
        </h5>
        <input style="display: none" type="text" name="id_inativar" id="id_inativar">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
      </div>
    </div>
  </div>

Function setaDadosModal(name,id) { Document.getElementById('name_confirms'). innerHTML = name; Document.getElementById('id_inactivvar'). value = id; }