javascript - Angular js ng-class false condition not working in ng-repeat -

i want highlight li if radio selected. inside ng-repeat, ng-class true condition working, false condition not working, please check code below

<div ng-init="friends = [         {name:'john', age:25, gender:'boy'},         {name:'jessie', age:30, gender:'girl'},         {name:'johanna', age:28, gender:'girl'},         {name:'joy', age:15, gender:'girl'},         {name:'mary', age:28, gender:'girl'},         {name:'peter', age:95, gender:'boy'},         {name:'sebastian', age:50, gender:'boy'},         {name:'erika', age:27, gender:'girl'},         {name:'patrick', age:40, gender:'boy'},         {name:'samantha', age:60, gender:'girl'}       ]">         <ul class="example-animate-container">           <li class="animate-repeat" ng-repeat="friend in friends" ng-class="{true:'hightlight',false:''}[radiobox==friend.name]">              <input type="radio" name="friends" ng-model="radiobox" value="{{friend.name}}" />           </li>         </ul>       </div> 

this because ng-repeat create new child scope each li element, every li element has own radiobox value in own scope.

for more detail, read understanding-scopes.

you avoid problem having . in ng-model, example using model.radiobox this:

<li class="animate-repeat" ng-repeat="friend in friends" ng-class="{true:'hightlight',false:''}[model.radiobox==friend.name]">   <input type="radio" name="friends" ng-model="model.radiobox" value="{{friend.name}}" /> </li> 

and in controller, initialize model beforehand:

$scope.model = {   radiobox: undefined }; 

example plunker: http://plnkr.co/edit/tcorxhszytn2kcxf2m3g?p=preview