Directive: Link function children not interpolating values - angularjs-directive

Question

I am trying to output child element id in a directive, but it keeps printing non-interpolated values. I don't know how to achieve that....please help.
I am trying to learn angular...
//////////////////////
//Directive example
app.directive('simpleNumber', ['$http', '$compile', function($http, $compile) {
return {
restrict: 'A', /*Example: <span simple-number></span>*/
terminal: true,
transclude: true,
replace: true, /*Replace <simple-number-ctrl> tag with below template*/
template: "<div><div id=\"{{$id}}\"></div></div> ",
scope: { /*data-binding to parent scope*/
ctrlWidth: "#", /*one way binding*/
strNumber: "=", /*two way binding*/
onWidthChanged: "&" /*Event function fired*/
},
link: function($scope, elm, attrs) {
console.log(elm.children()[0].id); //This is printing {{$id}} !!! I AM CONFUSED
}
};
}]);
<span simple-number ctrl-width="100px" str-number="numberText" on-width-changed="onWidthChanged(width);"><font color=green>Transcluded text</font></span>

Answer 1

When the linking function is called, the {{ }} bindings are not evaluated yet, so you still have them as raw text. You will get the correct value once the $digest cycle is finished.
Use this in your link function if you want to better understand what is going on.
link: function($scope, elm, attrs) {
console.log("bindings not evaluated yet:",element.html());
var unwatch = scope.$watch(function(){
console.log("after $digest, bindings are evaluated",element.html());
unwatch();
});
}

Answer 2

I have solved this by using $timeout (see code below). I don't know why it's working this way. Can someone provide an explanation?
//////////////////////
//Directive example
app.directive('simpleNumber', ['$http', '$compile', function($http, $compile) {
return {
restrict: 'A', /*Example: <span simple-number></span>*/
transclude: true,
replace: true, /*Replace <simple-number-ctrl> tag with below template*/
template: "<div><div id=\"{{$id}}\"></div></div> ",
link: function($scope, elm, attrs) {
//Print children ID's
var __debugOutputChildrenInfo = function(children)
{
for(var i = 0; i < children.length; i++)
console.log(children[i].id);
}
var children = elm.children();
__debugOutputChildrenInfo(children); //Prints {{$id}} [Shouldn't binding have been resolved by now?]
//Don't understand why this is working...need explanation?
$timeout(function() {
__debugOutputChildrenInfo(children); //Prints 002 [THIS IS WHAT I WANTED..NEED EXPLANATION]
});
}
};
}]);
<span simple-number ctrl-width="100px" str-number="numberText" on-width-changed="onWidthChanged(width);"><font color=green>Transcluded text</font></span>