checkbox inside an a tag is not working

[AngularJSSufferer]

Hi,

I have a checkbox and associated text inside an anchor tag as follows:

<a ng-click="change()">

  <input type="checkbox" ng-checked="content.active" ng-model="content.active">

  <div> click me! </div>

</a>

The value of content.active is getting binded properly, but the checkbox is always ticked (changes after the end of the change()).

Also, it works if i click on the text but not on the checkbox.

Help, somebody?

Thanks!

[Vlada Janošević]

<a ng-click="change()">

     <input type="checkbox" ng-checked="content.active" ng-model="content.active">

     <div> click me! </div>

</a>

What exactly do you want to do? Change  content.active  depending on checkbox?

I guess you want it?
http://plnkr.co/edit/80ed9DOcbyjteGh8BGw4

[AngularJSSufferer]

http://plnkr.co/edit/ZAeJQvMef2C4kZpNsjf0

Try clicking on the checkbox, its always ticked even though the value has changed.

Please help.

[Bryana Atanasova]

try this http://plnkr.co/edit/2RDs7a?p=preview

[OpenNota]

When you click on the checkbox, angular changes content.active for you. And then you change it back to the status quo in the `change` function.

[Ryan Randall]

This example shows 3 different ways of interacting with content.active: direct, using a change function, and using a watch function: http://plnkr.co/edit/8OyTVTSh6IIOI0UdIRrR?p=preview

It uses different HTML, and so may not be useful in this case.

[Chris Nicola]

You basically have a checkbox with a label. The correct way to do this in HTML is to use <label for="checkbox-id"> as this already gives you a clickable label will change the checkbox when clicked. Then just use ng-change on the checkbox to trigger whatever code you want on the change.