Radio group selected option not updating ngModel value in angular

Question

I am new to angularjs and trying to find a solution for the setting a selected value of radio group to the ngmodel.

//my.html     

<div ng-controller='controller'> 
 <div class="btn-group" ng-model="option" ng-repeat="arr in dragDropOption">
  <input type="radio" name="optionCorrectOpt" data-ng-model="option" 
    value="{{dragDropOption[$index].text}}">
      {{dragDropOption[$index].text}}
</div>

and //mycontroller.js

 app = angular.module('app', []);

 app.controller('controller', function ($scope) {
 $scope.dragDropOption = [];
 $scope.option = "not set";

 $scope.dragDropOption = [{
     text: "analog"
 }, {
     text: "isdn"
 }, {
     text: "dsl"
 }];
 //   $scope.option = $scope.dragDropOption[0].text;
});

My fiddle is here!

Might be it is repeated question, please help me with sharing already answerd stackoverflow question's link or new answer. Thanks in advance.

Answer 1

For input change

data-ng-model="option"

to:

data-ng-model="$parent.option"

Demo Fiddle

Answer 2

Replace

$scope.option = "not set";

<input type="radio" name="optionCorrectOpt" data-ng-model="option" 
value="{{dragDropOption[$index].text}}">

To:

 $scope.radioOption = {};
 $scope.radioOption.selected = "not set"

 <input type="radio" name="optionCorrectOpt" data-ng-model="radioOption.selected" 
value="{{dragDropOption[$index].text}}">

JS FIDDLE