Unable to get the children() after compilation within directive - angularjs

Question

I have a directive which compiles a template with radio buttons.
I'm trying to get the children after compilation and it doesn't show up.
Where am I going wrong ?
<div radiolist></div>
JS
app.directive('radiolist', function() {
var templateHtml = function () {
return '<label ng-repeat="option in options" > <input type="radio" ng-disabled="{{isDisabled}}" name="{{attributename}}" ng-value="option.Value" ng-model="$parent.ngModel" />{{option.Desc}} </label>';
};
return {
template: templateHtml,
link : function(scope, element) {
scope.options = [
{
"Value" : "Y",
"Desc" : "Yes"
},
{
"Value" : "N",
"Desc" : "No"
}
]
console.log(angular.element(element).children())
}
};
});
Demo : http://plnkr.co/edit/SUFXunVLOhYfK1x4jVe2?p=preview

Answer 1

The reason you can't see the children is because when the link function is called the directive has just finished compiling. There are no children because the ng-repeat hasn't had a chance to render anything yet.
I would recommend you restructure your code to not have to get access to the children, I assume because you want to add listeners to the radio buttons. Try explicitly defining each radiobutton instead of using ng-repeat.
Finally, the element is already an angular element, you don't need to wrap it again. Fix that line in your code to continue debugging.
Edit:
This mod of your plunkr might help you with the event bindings, I added ng-click to the rendered elements of ng-repeat, and passed the index of the radiobutton back:
http://plnkr.co/edit/fABRl8OGMywsilmo9m8e?p=preview
app.directive('radiolist', function() {
var templateHtml = function () {
return '<label ng-repeat="option in options" >' +
'<input ng-click="someFunction($index)" type="radio" ng-disabled="{{isDisabled}}" name="{{attributename}}" ' +
'ng-value="option.Value" ng-model="$parent.ngModel" />{{option.Desc}} </label>';
};
return {
template: templateHtml,
link : function(scope, element) {
scope.options = [
{
"Value" : "Y",
"Desc" : "Yes"
},
{
"Value" : "N",
"Desc" : "No"
}
]
scope.someFunction = function(index) {
console.log('clicked:', index);
}
// Don't fix this, but at least don't wrap element again
console.log('children:', element.children());
}
};
});