Angularjs custom radio button directive

[Alan Löffler]

Hi, I'm trying to make a custom radio button with a directive.

The problem is that when I use in the same scope more than one group of radios (like two groups with two different models), the second group updates the model of the first group.

I know that there's something wrong in my directive, I need to say to the directive to use an own scope, but don't know how.

My sample is here: http://jsfiddle.net/Onza/NZ8EX/

I really appreciate some help!

Thanks.

[Daniel Tabuenca]

Your problem is more of an html+css problem than an angular problem.

You are generating radio inputs and labels using {{value}} as the id. You should not have duplicate element ids in a page, especially when using html <label for='id'>.

You need to make sure you generate unique ids for things. I’ve modified your example to us the value of the ng-module attribute along with the value to generate an id:

http://jsfiddle.net/NZ8EX/5/

[Anaida Herry]

I want the same functionality but if I click on label the radio should get selected.

Can anyone help me ?

Thanks,

[Gopinath Pandian MCA]

HI Anaida Herry,,

Daniel Tabuenca  has shared the solution.. it will help u sure.. 

thank you Daniel.