In AngularJS how to make a li or any other element behave the same way as a radio button on a click event?

Question

Here's my code where I have radio buttons:

<ul id="chartType" >
        <li class="thumbnail">
          <label>
            <input type="radio" value='AreaChart' ng-model="chart.type" />
            <img src="images/area.png">
          </label>
        </li>
        <li class="thumbnail">
          <label>
            <input type="radio" value='PieChart' ng-model="chart.type" />
            <img src="images/pie.png">
          </label>
        </li>
        <li class="thumbnail">
          <label>
            <input type="radio" value='ColumnChart' ng-model="chart.type" />
            <img src="images/column.png" >
          </label>
        </li>
</ul>

What I want is something like this (i.e., when the user clicks on the li or img, it works the same way as the code above) :

<ul id="chartType" >
        <li class="thumbnail">
            <img src="images/area.png">
        </li>
        <li class="thumbnail">
            <img src="images/pie.png">
        </li>
        <li class="thumbnail">
            <img src="images/column.png" >
        </li>
</ul>

Answer 1

One way I found to do this is to keep radio buttons, but to simply remove the radio button circle in CSS like so:

input[type="radio"] {
  display: none;
}

Answer 2

You should write your own directive for this, which will recompile dom of elements after click on them.