angularjs - ng-model not working with radio buttons in angular -

i have simple form radio buttons pulls values server , loops through them provide radio buttons:

<form ng-submit="createsubcategory(subcategory)">     <div ng-repeat="sub_category in event_sub_categories" >         <label class="item item-radio">                   <input type="radio" ng-model="subcategory" ng-value="'{{sub_category}}'" >                   <div class="radio-content">                     <div class="item-content">                       {{sub_category}}                     </div>                     <i class="radio-icon ion-checkmark"></i>                   </div>          </label>     </div>     <div class="padding">         <button type="submit" class="button button-block button-positive">continue</button>     </div> </form> 

the form displays perfectly. however, radio button press doesn't seem saving. here createsubcategory method:

$scope.createsubcategory = function(subcategory){   console.log(subcategory); } 

the logs showing undefined. how subcategory logged after filling out form?

ng-repeat creates own scope. since you're binding radio buttons subcategory, populated ng-repeat scope's subcategory field, , not controller scope's subcategory field.

rule of thumb:

• always have dot in ng-model
• always create object containing fields you're binding to

also, ng-value expects angular expression.

so, in controller, have this:

$scope.formmodel = {}; 

and in view:

<input type="radio" ng-model="formmodel.subcategory" ng-value="sub_category" >