I had already used Angular in the application, meaning my app was already created, I use one app for the whole web application and a separate controller for each functionallity on the page. The radio buttons being new functionallity, I added a controller for this section alone.
Showing / Hiding content
The first thing I wanted to accomplish, was making the elements next to my radio button appear, when the button is active. This was previously accomplished by this script:
This logic is perfectly fine, and gets the job done, but when you have x amount of radio buttons, your script gets large pretty fast, since this code is repeated for each radio button. You can also write some more complex jQuery to make this work for all the radio buttons, without hard coding the element Ids, however Angular is simpler!
This works because I tell all my radio buttons to point to the same model, I then use the model in my ng-show expression. I only tell AngularJS when to show the elements, at all other times it should be hidden.
Next step – enabling / disabling the submit button
After Angularising the HTML i was able to go from about 60 lines of code, to no lines at all, only AngularJS attributes.