ng-class doesnot get evaluated

<div ng-if="question.type =='options'" ng-repeat="option in question.options" >
   <ion-radio name="{{$parent.question.id}}" 
       ng-model="$parent.question.answer" 
       required ng-value="option.id"  
       ng-class="{'has-custom-error':submitted && questionForm.{{$parent.question.id}}.$invalid,
       'has-custom-success':questionForm.{{$parent.question.id}}.$valid }" 
    >
       {{option.text}}
    </ion-radio>
</div>

I have to add has-custom-error on user submitting the form without selecting the option.That is form is not valid but the ng-classis not getting evaluated.

The demo code is over here:http://plnkr.co/edit/FwjoCTYONvi3BoFHNKFK?p=preview

There is at least one problem with your code. You must not use interpolation {{}} within your ng-class attribute. Here is the correct syntax:

ng-class="{'has-custom-error':submitted && questionForm[$parent.question.id].$invalid, 'has-custom-success':questionForm[$parent.question.id].$valid }"

I don't think it is possible to use {{ }} expressions on a ng-class expression. You should be able to use it like this questionForm[$parent.question.id]

Also I never got ng-class working with classes with - between the parts, only CamelCase like hasCustomError. So {hasCustomError: questionForm.$invalid} should work.

Have you considered using the styleClass ng-invalid-required that is already used by angular for your styling? It is usually a lot cleaner, since there is no need for all the ng-class expressions

When you are inside an Angular expression, you don't need the mustache braces. So your code should be:

<div ng-if="question.type =='options'" ng-repeat="option in question.options">
   <ion-radio name="{{$parent.question.id}}" 
              ng-model="$parent.question.answer" 
             required ng-value="option.id"  
             ng-class="{'has-custom-error':submitted && questionForm[$parent.question.id].$invalid,
'has-custom-success':questionForm[$parent.question.id].$valid }">
       {{option.text}}
    </ion-radio>
</div>

The variable form a.b has been replaced by the indexer form a["b"] so that it is evaluated correctly.

You can't use double-mustached expressions ({{ ... }}) inside expressions. The ng-class value is already an expression of type object, so you're supposed to use JavaScript syntax inside this attribute:

ng-class="{'has-custom-error': submitted && questionForm[$parent.question.id].$invalid,
           'has-custom-success': questionForm[$parent.question.id].$valid }" 

The use of $parent is also unecessary. BTW, you're not using it for your ng-repeat expression:

ng-repeat="option in question.options"

So you should simply use question instead of $parent.question: the scope of the ng-repeat block inherits from its parent scope, and the question is thus available through inheritance.

Note that, playing with your plunkr, it seems like the ion-radio directive that you're using doesn't correctly set the name attribute of the input it generates. This is probably why the CSS classes don't appear.

ng-form is the solution to my problem.But the problem that I am facing is in the name attribute of my ion-radio directive. For radio hence i used angular ng-invalid-required.And for other html tag i used ng-form.$invalid