Angularjs and Image Picker - I can’t capture selector content

Question

I am with the following doubt:

If I click on the selector (in the box), I can capture the content of ng-model "firstJogo" and manipulate it in javascript as needed:

<p>Escolha o jogo</p> 
<select class="image-picker show-html" ng-model="primeiroJogo">
    <option
      data-img-src='../public/images/logosmite.jpg'
      value="Smite"
      class="image-picker"
    ></option>
    <option
      data-img-src='../public/images/logohmm.jpg'
      value="Heavy Metal Machines"
      class="image-picker"
    ></option>
</select>

But what I need is for it to be possible to capture the content of this ng-model if the user clicks directly on the image. Someone would know me how to do that?

Answer 1

Is there any need to use the select?

You get the result you want using the input:radio

Would something like this:

<p>Escolha o jogo</p>
<div class="image-picker show-html">
  <label>
    <input type="radio" ng-model="primeiroJogo" value="Smite">
    <img src="../public/images/logosmite.jpg" alt="">
  </label><br />
  <label>
    <input type="radio" ng-model="primeiroJogo" value="Heavy Metal Machines">
    <img src="../public/images/logohmm.jpg" alt="">
  </label>
</div>