Inspecting Detached DOM Tree in Angular applicatio

问题:

Any idea as to why the following are showing up as Detached DOM tree ? I am trying to track down a memory leak in my application.

I pulled out these snippets using $0 in the console . In the chrome profiler the containing objects were all highlighted in red meaning that they could not be GC'd or are preventing garbage collection in some way.

<div class="col-sm-6 col-md-6 col-lg-8 ng-scope" ng-if="!ismobile">
      <div>
        <h1 class="ng-binding">{{episodeobj.seriesTitle}}</h1>
        <h2 class="ng-binding">{{episodeobj.titlefull}}</h2>
      </div>
      <hr>
      <h4 class="ng-binding">{{episodeobj.summaryshort}}</h4>
    </div>

---

<div class="col-sm-6 col-md-6 col-lg-8 ng-scope" ng-if="ismobile">
  <div>
    <h1 class="ng-binding">{{episodeobj.seriesTitle}}</h1>
    <h2 class="ng-binding">{{episodeobj.titlefull}}</h2>
  </div>
  <hr>
  <h4 class="ng-binding">{{episodeobj.summaryshort}}</h4>
</div>

---

<div class="row" style="height: 350px; overflow: hidden; overflow-y: scroll;">
  <div class="row">
    <div class="col-sm-6 col-md-3" ng-repeat="avi in avatars">
      <a ng-href="#" ng-click="$event.preventDefault();setavatarid(avi)">
        <img ng-src="{{avi.src}}" width="100%" />
      </a>
    </div>
  </div>
</div>

---

<a href="#" ng-click="$event.preventDefault;gotoseries()">
  <img ng-src="{{series.imagestyles.style6}}" width="100%" style="border-radius: 20px;">
  <br>
  <h4>More Episodes!</h4>
</a>