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

Issue

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>

Solution

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;
}

Answered By - achudars