ng-repeat affects the wrong place - angularjs

Question

I have written a custom directive named fRadioButton in AngularJS. As far as I know, ngRepeat directive affects the tag that it's used with. However in my case, ngRepeat behaves strangely. Here are the details:
My directive template:
<label>
<input type="radio" value="fValue"/>
{{fName}}
</label>
My directive's JavaScript file:
directivesModule.directive('fRadioButton', function() {
return {
restrict: 'EA',
replace: true,
scope: {
fName: '#',
fValue: '='
},
transclude: false,
templateUrl: '/directives/f-radio-button.html'
};
});
I use the directive from any page as follows:
<f-radio-button ng-repeat="period in myCtrl.periods track by $index"
f-name="period.name" f-value="{{$index}}""></f-radio-button>
According to the ngRepeat, I expect the genereated HTML to be in the following format:
<label></label>
<label></label>
<label></label>
<label></label>
However, it is generated as follows:
<label>
<f-radio-button></f-radio-button>
<f-radio-button></f-radio-button>
<f-radio-button></f-radio-button>
<f-radio-button></f-radio-button>
</label>
How can I directly duplicate the label tags with ngRepeat? I have tried it with replace=false, but it didn't work either.
I guess that replace=true runs before the ng-repeat. Is there a way to run ng-repeat before the replace=true?

Answer 1

You can pass an array into your directive and render radio items inside:
.directive('fRadioButton', function() {
return {
restrict: 'EA',
replace: true,
scope: {
model: '=ngModel',
options: '=',
fName: '#',
fValue: '#'
},
template: function(element, attrs) {
return '<div> {{model}}' +
'<label ng-repeat="option in options">' +
' <input type="radio" ng-model="$parent.model" ng-value="{{ option.' + attrs.fValue + ' }}" name="' + attrs.name + '" />' +
' {{option.' + attrs.fName + '}}' +
'</label></div>'
}
};
});
Then you could use it like this:
<f-radio-button options="myCtrl.periods" ng-model="selected" f-name="name" f-value="id"></f-radio-button>
Here is a simple demo:
Demo: http://plnkr.co/edit/Xcvt46ljV58513saq7BC?p=info

Answer 2

ng-repeat repeats everything that is inside the element you attach it to
<div ng-repeat="period in myCtrl.periods track by $index">
<f-radio-button f-name="period.name" f-value="{{$index}}"></f-radio-button>
</div>
EDIT
Alternatively
myApp.directive('fRadioButtons', function() {
return {
restrict: 'EA',
replace: true,
scope: {
periods: "="
},
template: '<label ng-repeat="period in periods"><input type="radio" f-name="{{period.name}}" value="{{$index}}"/>{{period.name}}</label>'
};
});
function MyCtrl($scope) {
$scope.periods = [{name: "foo"}, {name: "bar"}, {name: "foobar"}];
}
http://jsfiddle.net/Lvc0u55v/3010/