I am facing a situation where I have a div element that needs to be attached to an element within an ng-view DOM tree. This div contains text elements that require evaluation within the current $scope of the ng-view tree. How can I make Angular re-evaluate this attached element within that specific scope?
The initial state of the div element is separate from the document and outside the ng-view element. Here is how it looks:
<div id="eventInfo">
The event starts at {{eventModel.startTime}}.
</div>
The expression eventModel.startTime needs to be bound considering the scope of the element within the ng-view where it's being moved, ensuring it has access to the correct instance of the eventModel object.
To achieve this, I believe I need to follow these steps:
targetDiv.appendChild(eventInfo); // Move event text into target element
var scope = angular.element(targetDiv).scope(); // Obtain target scope
angular.$compile(eventInfo)(scope); // (?) Apply target scope to event text
The challenge lies in the last line of code. Since this JavaScript code isn't inside an Angular controller, how can I gain access to $compile?
(I have referred to the question "Bind an externally loaded DOM element to Angular's scope" but haven't found an answer to my specific query.)