Angular controller not seeing dynamically created elements

Question

I have a jQuery based app that contains a large grid of data that is built using jqGrid. The user should be able to click on a row in the grid and get a popup dialog showing some more details about that row. I would like for this dialog to be implemented in angular but I'm having trouble getting it to work properly.

jQrid gets its data from ajax calls and dynamically updates the DOM with corresponding rows. My plan was to put ng-click attributes on each of these rows and to have a handler in the angular controller that would open up a dialog box and show the data for that row. However, the ng-click handler isn't being called. It seems that angular is having trouble seeing the new elements created by jqGrid.

Is there someway to tell the angular controller about these dynamically created dom elements?

Answer 1

Of course, it wouldn't work. When Angular app starts, it goes through the DOM and locates all the directives (such as ng-click) and compiles/links them.

This happens when the app starts. Any new elements with directives that you add are added "under the radar" of Angular.

To answer your question, yes, there are ways, but I haven't seen anything that was not hacky. In general, it's not a good idea to combine Angular with jQuery (unless you're building a directive)