Optimizing Directives in AngularJs

Not many apps require this optimization technique. If the directive is applied 50+ times on a page, consider this technique.

I am displaying xml on a page.  When the user clicks on a node, a drop down list (ddl) is displayed.

Initially my app rendered all nodes with a ddl.  The ddl was hidden.  This significantly increased the size of my dom. Most nodes are not selected for editing.  Wasted work compiling on page load.

Using $compile(htmlStr)(scope) AngularJS compiles and renders ddl's only after the user clicks to edit.

HtmlStr is a string including the ng-select expression.  Be sure to have all data loaded in scope before compiling.

I apologize for the lack of code, phone bogging today.

Another optimization would be one list on the page used by all directives.  This would not support simultaneous editing.