AngularJS transcluded nested directive - angularjs

Question

i'm trying to create an angular directive like this :
<radio-button-group group="myGroup" label="My Group" data-model="myModel.attribute">
<radio-button id="value_1" value="1">Value 1</radio-button>
<radio-button id="value_2" value="2">Value 2</radio-button>
</radio-button-group>
The main goals are reuse and avoid repeating ng-model on every <input type="radio" ng-model="myModel.attribute"> and code duplication in general.
I've written the followings:
formjs.js
var formjsModule = angular.module('hp.formjs', []);
// Directive
formjsModule.directive('radioButtonGroup', function () {
return {
restrict: 'E',
transclude: true,
scope: {
dataModel: '#',
group: '#',
label: '#?'
},
templateUrl: function (elem, attr) {
return 'formjs/radio/radio-group-tpl.html';
}
}
}).directive('radioButton', function () {
return {
restrict: 'E',
require: ['^radioButtonGroup'],
transclude: true,
scope: {
value: '#',
dataModel:'#',
group: '#'
},
templateUrl: function (elem, attr) {
return 'formjs/radio/radio-item-tpl.html';
}
}
});
formjs/radio/radio-item-tpl.html
<input type="radio" name="{{group}}" id="{{group+'_'+id}}" ng-value="value" ng-model="dataModel"/>
formjs/radio/radio-group-tpl.html
{{label}} m: {{dataModel}}
<div class="col-sm-10" id="g_{{group}}" ng-transclude>
</div>
</div>
I'm aware of transcluded scope, but i don't see the elegant way to do this binding.
Help, please!

Answer 1

It has to be directive? Wouldn't this be sufficient?
// HTML template
<div ng-repeat="option in options">
<input type="radio" ng-model="$parent.selected" ng-value="option"> {{ option }}
</div>
...
// Controller
$scope.selected = null;
$scope.options = ['Radio one', 'Radio two', 'Radio three'];
Of course, if you insist, you CAN make it a directive.
Usage in HTML, where options is array like above.
<radio-group group-name="My group"
ng-model="selected"
options="options"></radio-group>
Actual directive
app.directive('radioGroup', function () {
return {
restrict: 'E',
scope: {
groupName: '#',
options: '=',
ngModel: '='
},
template: '<legend>{{ groupName }}</legend>' +
'<div ng-repeat="option in options">' +
' <input type="radio" ' +
' ng-model="$parent.ngModel" ng-value="option"> {{ option }}' +
'</div>'
};
});