$compile not compiling html string - angularJs

Question

I'm trying to compile some raw html with angular directives with the properties over scope but it is not working as expected. Here is an snapshot of simple code I'm running on a breakpoint in console.

$scope.scopeString = "scope string value";

"scope string value"


$scope.scopeArray = [1,2,3]

(3) [1, 2, 3]


$compile(`<div>{{scopeString}}</div>`)($scope).prop('outerHTML')

"<div class="ng-binding ng-scope">{{scopeString}}</div>"


$compile(`<div><div ng-repeat="item in scopeArray">{{item}}</div></div>`)($scope).prop('outerHTML')

"<div class="ng-scope"><!-- ngRepeat: item in scopeArray --></div>"

Can anyone tell what am I doing wrong?

Answer 1

Scope bindings are calculated on digest cycle. Retrieving HTML from the element immediately doesn't leave it a chance to interpolate bindings.

When code is executed inside digest cycle (e.g. a controller) it can be

var $el = $compile(`<div>{{scopeString}}</div>`)($scope);
$timeout(() => {
  console.log($el.prop('outerHTML'))
});

When it is executed outside digest, it is

var $el = $compile(`<div>{{scopeString}}</div>`)($scope);
$scope.$apply();
console.log($el.prop('outerHTML'))