AngularJs Memory Leak : scope $$watchers increase even if the watched elements are removed -

I have found a big issue with my AngularJs application ...

Loading server (custom form) Of course, the code loaded in HTML has some ng-show , ng-click etc. ... then, I compile it before adding $ $ to my page.
it works fine

But, every time I make the $ compile weighted HTML, it's my scope (definitely the ng-show watchers) ) Tracks more $$ in .

Here's a small demo / simulation:

My problem: That $$ watchers will never be less and will not cause memory leakage You can click on "load something" hundreds of times.

I have tried to remove () , empty () , Unbind () Element (link), but the $$ tracking array continues to grow and is never cleaned

How can I resolve that issue? How can I clean up $ $ or check "uncompressed" waste?

Thank you for your help!

Since the new elements are compiled from the same scope and on the same element, Is not removed.

When their scope is destroyed ( scope. $ Destroy () ) All visitors are removed, the element that is automatically removed is removed, however your The element is never removed, you keep your HTML replacing the new nodes.

There is a clear way to avoid this to avoid adding a new link again, rather than a dynamic ng-repeat list.

Otherwise, if you want to keep your code, you can create a new opportunity for your collection every time you compile. In this way, when it is compiled again, the previous scope is destroyed and all its guards are removed.

You can see here in action. Whatever I've done, the scope by scope $ New () is converted into a copy call so that the element can be set to a new radius every time:

PS: This is an interesting use This was the case, which I had never faced, it could contribute to the Bronze Community: -)