We Keep Coding

Provide both :value and v-model on a radio type field

<input type="radio" :value="myValue" v-model="value" />
I'm trying to create a radio button and wrap it in a component, so value becomes a variable. The problem is that I'm getting the following error:
:value="myValue" conflicts with v-model on the same element because the latter already expands to a value binding internally
I've tried to replace v-model with direct bindings but I cannot replicate the same functionality. Why does this error appear in this case? This is taken directly from official docs for the radio buttons.

v-model is just shorthand for :value="someVar" #input="someVar = $event". meaning you are assigning the value twice. Depending on your need you can do :value="someVar" and then have a custom function handle the input like so:
#input="someFunc" this function would accept the input (by default) and then you could update myVar as you desire.
See here for a more detailed explanation

Which event is triggered when v model value is changing

I'm new to Vuejs and my requirement is to write a single functional globally to trigger whenever v-model value of my form elements are set. I tried to write this for element.onchnage but this is not working.
Can some one tell me which HTML event is triggered when the v-model value is set in vuejs ?

Hey Linu and welcome to SO.
Check out the docs for Form input bindings:
https://v2.vuejs.org/v2/guide/forms.html
There it says:
v-model internally uses different properties and emits different
events for different input elements:
text and textarea elements use value property and input event
checkboxes and radiobuttons use checked property and change event;
select fields use value as a prop and change as an event.
So instead of v-model you can do the following for inputs
<input :value="dataProperty" #input="dataProperty = $event.target.value" />

How to get both check box values and radio button values in angular.js

My demo https://embed.plnkr.co/R4mdZr/
I am new to angular as I mentioned I want to get both checkbox true values and radio button values ..
There is a condition if ingredients minimum value is equal to one means it will show as radio or else checkbox .
How to get those values?

You should use ng-model when you're dealing with inputs. I'm not sure what values you want in your model, but you would typically use the ng-value directive here to assign a certain property, or perhaps the whole object to your ng-model.
For example
ng-value="get_ing_n"
Would assign the complete object to your model when you select a radio.
ng-value="get_ing_n.ingredientName"
Would bind the ingredientname.
I forked your plunker to demonstrate this. Beware however that there are some ng-init's present to format the model. It is generally not considered a good practice to put this logic into the view, so it's best to just use this as a reference.
If you want to apply some additional logic when selecting a checkbox/radio button, you can use the ng-change directive where you can call a function on your controller on model changes.

What is the best way to handle events in AngularJS in this case?

I am absolutly new in AngularJS and I have the following doubt about how to handle event in Angular.
So I know if in a view I have something like this:
<input type="text" ng-model="handle" />
it means that exist a 2 way binding between this input element in the dom and an handle variable into the Angular $scope, for example:
$scope.handle = '';
So any change that happen into this input object implies a change of the handle property in the $scope and vice-versa.
So, into the Angular applcation, I can explicitly declare a whatcher
// I explicitly declare a whatcher on the handle property: when the value of this propertu change the function() is performed:
$scope.$watch('handle', function(newValue, oldValue) {
console.info('Changed!');
console.log('Old:' + oldValue);
console.log('New:' + newValue);
});
So it should have the same meaning of manually adding a classic vanilla JavaScript EventListener (by the addEventListener() on the object that I want to observe in a classic old vanilla JavaScript application (that don't use Angular).
When something change on the input value the function associated to the whatcher is performed.
Ok it is pretty clear for me.
Now I say that I can also do something like this.
Into the HTML code I can have something like:
<input type="button" value="Click Me" ng-click="alertClick()" />
And in the Angular controller I will have something like:
$scope.alertClick = function() {
alert("Clicked !!!");
}
So it seems like the ng-Click directive perform a function that is a $scope field when there is the click event on the button.
But can I do the same operation as done in the first example? Can I do it declaring a whatcher on the button if it is associated to a model object by the ng-model="handle" directive?
When is better use the first method and when is better the second method to handle events in AngularJS?

ngModel is used to bind an imput form the UI to your controller
ngClick is just a regular javascript expression that have access to your controller scope that will be executed at the click event.
Here you have to use ng-click.
With angular a good practice is to avoid using function like addEventListener() or Jquery other function...
Because AngularJS wrap all this functionality and will run digest loop or other voodoo magic if necessary.

Use the click event. $scope.$watch should be used watching when something changes instead of things that are better for event handlers.

The tow "methods" you pointed out are not the same thing. At all.
The first, $watch, is intended to listen to the $scope changes. You can specify which property of the scope you want to watch, and when a change occur it will call you callback function. For more details, see the Digest cycle documentation.
The second, ng-click attribute directive, listen to the DOM events and evaluate the expression you pass in when the event occur.
In your case, for the button, you have two options. You can use the ng-click attribute directive to trigger a function in your scope OR use the ng-submit attribute directive in the form html tag of your inputs. That way you can trigger the form validation with the button or when the Enter is pressed.
See the documentation for ngSubmit.

ngModel applies to specific elements such as input,select, and textarea. As the result, you cannot use ngModel on a button. That is why you use ngClick to get the click event.

How do I use jquery's prop() to set the attribute of a checkbox?

I want to use prop() to set the attribute of a checkbox to checked.
When I use prop("checked",true) I can visually see that the checkbox is checked, but if I look at the HTML there is no attribute value called checked.
For example:
<input type="checkbox" class="my_class" checked>
is what I would expect to see after using prop("checked", true).
However, I don't see any change in the HTML code. I want to later reference whether or not the attribute checked is set, but since there is not attribute called checked in the HTML, then I'm unable to reference it.

When using prop() you are changing the property and not the attribute, so the changes can't be seen in a DOM inspector, but it is for all intents and purposes changed.
To later see if the element is checked, you'd do:
$('.my_class').is(':checked')
which would return true when checked or false when unchecked, regardless of what you might see in a DOM inspector.

Is there a specific reason you wouldn't use attr() for this application?
If not, that's what you should be using instead of prop()