My AngularJS application is running into performance issues due to high memory consumption. There are around 200-250 repeated elements, each containing inner items with nested ng-repeats. The JS Heap memory allocation reaches up to 70MB, causing the webpage to crash and impacting other open tabs. Batarang flagged over 3000 Scope items with $id, which I reduced to 700-800 Scope items by restructuring directives. However, memory usage remains high without a noticeable improvement in performance. During profiling, clicking on the garbage collector icon reduces memory consumption by about 15 MB. I need guidance on how to debug this issue effectively.
UPDATE: The directive structure being repeated is as follows:
<li class="reminder-content">
<wizards/>
<editwidget></editwidget>
<div style="font-size:87%;padding-left:5px;">{{::reminder.time| date:"shortTime"}} <span class="date-particulars">{{::reminder.time | dateFilter}}<span class="date-particulars-date">Reminder was set for <strong>{{::reminder.time | date:"longDate"}}</strong></span></span></div>
<div class="reminder-body">
<p class="{{reminder.trip.destination}}">{{::reminder.trip.destination}}</p>
<p class="pad-top">{{::reminder.text}}</p>
<p class="pad-top" id="trav_name"><a href="{{::reminder.traveler.conversationLink}}" target="_blank">{{::reminder.traveler.name}}</a></p>
<p>{{::reminder.wizard.id | customFilter:this}}</p>
</div>
</li>
<reminder ng-repeat="reminder in reminders.delegatedReminders track by reminder._id| orderBy:'time'"></reminder>