Question

I have the following code that is rendered when the page is loaded

<div id="results">
 <%= render :partial => results %>
</div>

Here is the content of results partial:

<input type="text" ng-model="Myname" placeholder="Enter a name here">  
<h1>Hello {{Myname}} </h1>

The binding happens properly and works perfectly fine.

Now if I replace jQuery("#results") with results partial, then the content is replaced but directives are not compiled and the binding is also broken.

Compiling angular directives happens during the first time when the page is loaded. but if we change HTML content dynamically then it breaks. Can anyone help me understand what I am doing wrong here.

Answer 1

You are right, compiling happens upon the loading of the page.. Or whenever angular changes something in the DOM (via directives such as ngRepeat, etc..)

As you are changing the DOM manually, all you need to do is trigger a $compile on the DOM element you changed. Just do $compile(jQuery("#results")) and the binding should work! See more here.