I have a code for rendering 38 list items with around 100 data sets rendering at a time. It really makes the app slow and stuck while rendering that particular state. I tried with making the list display with infinite scroll but still it it is slow as a tortoise. What to do ? please help me …
On smartphone or desktop? Try use trackBy and improve your repeated html code (reduce weight)
Both in smartphone and desktop
I have about 200 items without problems.
please let me know how can i proceed it. coz as soon as i click the button the whole app freezes and loads the contents around 10 secs later …
Can you post the code of your list items? That will make it easier to analyze the problem. 
For example; rendering images in list items can be heavy.
<ion-list>
<br><br>
<ion-item style="background: transparent;border: none;" class="list card padding" ng-repeat="x in myData track by myData.id">
<div class="item item-avatar">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAxBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Njg4QjNCNTAxMDVEMTFFNjgzNzFBMzhBMDQxRUMyQ0UiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Njg4QjNCNEYxMDVEMTFFNjgzNzFBMzhBMDQxRUMyQ0UiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiBXaW5kb3dzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9Ijc5N0IwNDk5NzQ1ODUzNUQwMzI2Q0ZGNEI2MEY3MzZCIiBzdFJlZjpkb2N1bWVudElEPSI3OTdCMDQ5OTc0NTg1MzVEMDMyNkNGRjRCNjBGNzM2QiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgKCTqUAAAGAUExURSUpNY5zRsqRYHdOKpWHdK1sNHqCm6qqrKyahIqGlZBoOlVjiENTeaOVe/z9+5ubmrGysy04VIiHiaWkqTBFdNDV0K2tsEtchU00H5KTlLGtq6OippSSmpyiqah2SXd3h2lpdbWFVaGepXp5eh4hLqejnGFri4haMJORip6coYyPknh5kbOwrZqZlREUG7q6uRUwaxUZI5N4XUZISRseKaaprQICAxMWIWZkZpyZol1ALpiSniIlMb1zLpGLmoB/kFRUXCsjGyE5cFxidaqwurKonpSao5WTovPz7SovOjg+SR8tUF1SQhkcJnB5lXx0bWtwiZSWmubn45eWk7W2uktLUaqmpDU2PoGOp6enqhARF7Cvs29telZNQD0tJLe0sp+cpJqWoK2rpyUbFZ2bo3BaP5qZng4VIpifp56puY2guHFubgoOGh8VIBIQDpudoJiYmRgZKT86QCIfIKVlJY6RnpWKfsfJxbu8vqCemoCAgbW4seDf2ztPexAPFg0PIFuC08UAAAQISURBVHjaZJMJX9pIGIeH5RIBOQURihDOIGAjEUTCbaUeUagHBhWR5VhrV6BoFVr0q/edCej2t0+uyeSZ/zsTCKqiXbRLqFb3RKrVaQdsu9PHVYR4nmVZr9fLceIAhJCXwEEX5+V5fsgOeYR2WXYqgjE1OeLBSBjC8jgJizz7Z+JU5LDIcSzLMKAykMIMmMGAxy4nRoInDoXiXvCARAKeJQgMMXF57A0YniWVWD4RrUWj0doQcYkoEQfsYFoQpsXgelAJDhBrsGNRTGR4cabeWTlSEYC4Wu2FfRcHUAiH4jzSAWcoBpHRPxNhSbAonoV6iZlIGiR0CIuBHtw7wMtnmG6i+/rt2+trt5t4i4B5erGIb7vdaBeMl3+5+vctYKk+jHahaFScZ41FVfJm8VtB9S2J+y8CXNzu9l5sLwacArEcGnvGgNGz7iSGO52WP6TTsKfdNkIwGAoajUEUbjab4U9at9PplGMpIF2XLAFbUqdWK5Oty3y+0WgU8aGf4fD1nDwQkKfl0qX8fTw+XlgwxjH5dlsq3dr64RtFIpERul4Oj6RSuVyaJ0/jsQUgF4cRebympfrRmS4SOdaBeC17CNTjM4xYDEKj9nc+j/fNN3F5bin+juUz8PNevLkHxj7wxMSj/3jx0Zcvv349Vcaeu82rWD0+vMMzxGK4eUGdDl9mEdXI4uLiU/gTIbg5MIx1un6/ghObyuWwL3h0RRZzXz9Ye3rSa+e02h9HOcP+/r4hpINAnHh25vPJroZvtWPHIY9MdpfbMxgMk6LLE4xoMXgxyyrz/juGYtFVtprNZo26KNPOAaDJQGxaRppC4eOMyfnXr+fWQqEAon8eI5HMS+bXkV65/Kgxmwsz/Le327cKCJwUyyuS+fm2NPDwEAg4QbSU1FbNZGKemDGKbeBcM9Fo/MasROKUiLixmCyrrWqr1arRwOl8++REvwMNa7nvyH2/OjiAvd1uY5HKltVYJJyvPT9f7+CRZZpeKRaLuVzuNAb/RxAFVXYVVBHFyfPz2iM0/Kt0a+Xy8tLlunO5Nj0gCspWJptdPSz7AfXhxtqaReEvl1dUFBXKYvUSTBAFpWBqpDIZlUqxegiULJaWYjWrUjkouldxhFQqYxY+AXQhCEqTiUqmMiCDrSpRVAmuGUeHpmi6Bz/1scMRsk1Fu73RSt6kUqlM6abVukk5HI6bVqNB050+AF9OH1kEwYSx2ymKajSSyQZckp1kErwG3ep0+pWKzRbqI6V96tlFlbLDRs/odToVBwSGKshiMgnvzNrTkfYPdK+Hq9t06MRCuMDo9Xo4SBP3KZXKDUHAlXT9EV7MBgF6lWILB89m0+v1dL3Q2GNDGx/+zz+YHUyl8vgYwth+CzAAdLNRN1xALcAAAAAASUVORK5CYII=">
<h2>{{x.eventname}}</h2>
<p>{{x.domain}}</p>
</div>
<div class="item item-body">
<center>
<p>VENUE: {{x.venue}}</p>
</center>
<ion-list>
<div ng-repeat="group in groups">
<ion-item ng-if="x.id == group.name" class="item-stable button button-block button-positive" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}">
<i class="icon" ng-if="x.id == group.name" ng-class="isGroupShown(group) ? 'ion-chevron-up' : 'ion-chevron-down'"></i>
<span style="text-align:center"> More on {{x.eventname}} </span>
</ion-item>
<ion-item ng-if="group.name == 1" style="white-space:normal;text-align:justify;" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
<ol style="list-style:initial !important" class="padding">
<li>Number of participants-6+1 (rolling substitute) +1 (in case of injury).</li>
<li> Each innings will be of 4 overs</li>
<li>The event will be only for boys.</li>
<li>The whole team must be wearing the same uniform.</li>
<li>Other details will be given on the spot.</li>
</ol>
</ion-item>
<ion-item ng-if="group.name == 2" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
<ol style="list-style:initial !important" class="padding">
<li> Number of participants-7+6.</li>
<li>Duration- 30 minutes consisting of two equal halves.</li>
<li>Roll-in substitution allowed.</li>
<li>No offside rules</li>
<li>Separate event for boys and girls.</li>
<li>Dress Code- school football jersey with shorts and football boots, shin guards and stockings are compulsory</li>
<li>If the match ends in a draw, then direct penalty shootouts will take place.</li>
<li>Referee’s decision is final.</li>
<li>If fewer teams are participating then league and knockout format will be followed else knockout format will be followed.</li>
</ol>
</ion-item>
<ion-item ng-if="group.name == 3" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
<ol style="list-style:initial !important" class="padding">
<li>Number of participants-5+3.</li>
<li>Duration- 20 minutes consisting of two equal halves.</li>
<li>Jerseys should have a clear numbering on the back as well as in the front.</li>
<li>Separate event for boys and girls.</li>
<li>The kit number should be from 4 to 15. Players without the mentioned jersey number will not be allowed.</li>
<li>The same jersey number should</li>
<li>Roll-in substitution allowed.</li>
</ol>
</ion-item>
<ion-item ng-if="group.name == 4" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
<ol style="list-style:initial !important" class="padding">
<li>Number of participants: 10+2.</li>
<li>Participants need to wear their school sports uniforms.</li>
<li>Other rules to be explained on the spot.</li>
</ol>
</ion-item>
<ion-item ng-if="group.name == 5" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
<ol style="list-style:initial !important" class="padding">
<li>Number of participants – 3 (2 singles, 1 doubles pair).</li>
<li>No individual matches. All matches are played in ‘teams’.</li>
<li>Matches will be of 11 points.</li>
<li>All rules and regulations of TTFI to be followed.</li>
<li>Separate events for boys and girls.</li>
<li>Only the finals will be of a best-of- five match (4 singles and 1 double).</li>
</ol>
</ion-item>
<ion-item ng-if="group.name == 6" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
<ol style="list-style:initial !important" class="padding">
<li> Number of participants- 2 + 1(reserved)</li>
<li>Participants are to bring their own kit.</li>
<li>Matches will be of one set each.</li>
</li>Sets will be played on the basis of 6 all tiebreakers.</li>
</li>2 single matches will be played</li>
<li>In case of a tie, a doubles match will be played as a decider</li>
</li>Separate events for boys and girls.</li>
</ol>
</ion-item>
<ion-item ng-if="group.name == 7" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
<ol style="list-style:initial !important" class="padding">
<li>Number of participants-6+3.</li>
<li>Matches will be on knock out basis.</li>
<li>Boys: Set length 25 points.</li>
<li>Girls: Set length 15 points.</li>
<li>Winning team must have a lead of 2 points or else the match will continue (in case of tie).</li>
<li>Dress code- School sports jersey.</li>
</ol>
</ion-item>
<ion-item ng-if="group.name == 8" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
<ol style="list-style:initial !important" class="padding">
<li>Number of participants-1.</li>
<li>This event consists of the activities of cycling, swimming and running.</li>
<li>The event starts off with cycling, followed by running, and ends with swimming.
</li>
<li>Cycling – 800m for boys & girls</li>
<li>Running – 600m for boys & 400m for girls</li>
<li>Swimming – 50m for boys & 25m for girls</li>
<li>A total of 8 participants will qualify after the prelims are done.</li>
<li>The finals will be held on the third day of the fest.</li>
<li>Event to be held separately for boys and girls.</li>
</ol>
</ion-item>
<ion-item ng-if="group.name == 9" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
<ol style="list-style:initial !important" class="padding">
<li>Number of participants- 1</li>
<li>15 minute each for a maximum of 5 rounds.</li>
<li>All other laws of FIDE will be applied.</li>
<li>There will only be one combined tournament for boys & girls</li>
<li>Participants must be in their school uniform and must carry their school id card
</li>
</ol>
</ion-item>
<ion-item ng-if="group.name == 10" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
<ol style="list-style:initial !important" class="padding">
<li>Number of participants- 2.</li>
<li>Matches will be on knock out basis.</li>
<li>Separate event or boys and girls.</li>
<li>It will be a 10-meter distance competition.</li>
<li>It will be a 3 round competition.</li>
<li>In each round, everybody will shoot 3 arrows within 2 minutes.</li>
<li>One round will be considered for trials (boys and girls).</li>
<li>Referee’s decision shall be final.</li>
</ol>
</ion-item>
<ion-item ng-if="group.name == 11" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
<ol style="list-style:initial !important" class="padding">
<li>Number of participants – 1.</li>
<li>Duration- 30 seconds, per topic.</li>
<li>The moderators shall provide the participants with their stances.</li>
<li>A change in topic will occur once 30 seconds of the respective topic have been exhausted.
</li>
<li> Total number of topics will be twice the number of the participating schools.</li>
<li>Each school will get two topics on which it shall start the round.</li>
<li>Any use of obscene or inappropriate language shall not be entertained and shall lead to immediate disqualification.</li>
<li>Judging Criteria:</li>
<li>Creativity.</li>
<li>Content.</li>
<li>Delivery.</li>
</ol>
</ion-item>
<ion-item ng-if="group.name == 12" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
<ol style="list-style:initial !important" class="padding">
<li> Number of participants- 1.</li>
<li>Duration- 1 minute.</li>
<li>Participants must display originality.</li>
<li>The skill that is displayed must not be dangerous.</li>
<li>Participant should not exceed the time limit of a minute.</li>
<li>Judging criteria:</li>
<li> Composition.</li>
<li>Development of ideas.</li>
<li>Skill, technique and process.</li>
<li>Depth and breadth of composition.</li>
<li>Presentation of work.</li>
</ol>
</ion-item>
<ion-item ng-if="group.name == 13" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
<ol style="list-style:initial !important" class="padding">
<li>Number of participants – 5+2.</li>
<li>Duration - 3+1 minutes.</li>
<li>No additional time shall be provided.</li>
<li>Any kind of inappropriate language or obscene content shall lead to expulsion from the stage.</li>
<li>The schools must get their own props for the acts.</li>
<li> No particular theme or topic shall be provided. The participants are free to make acts as per their wish.</li>
<li> Judging Criteria:</li>
<li> Creativity.</li>
<li> Content.</li>
<li>Delivery.</li>
</ol>
</ion-item>
<ion-item ng-if="group.name == 14" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
<ol style="list-style:initial !important" class="padding">
<li>Number of participants – 2.</li>
<li> The quiz will be based on general knowledge and will not be subject specific.</li>
<li> There will be a preliminary written quiz, which will be timed as well.</li>
<li> On the basis of the written quiz, the teams entering the final quiz will be selected.
</li>
<li> Only 8 teams will be selected for the final quiz.</li>
<li> The rules of the various rounds of the final quiz and their respective pointing systems will be informed to the teams on the floor prior to the quizzing.</li>
<li> As always, the quiz masters decision shall be final.</li>
</ol>
</ion-item>
<ion-item ng-if="group.name == 15" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
<ol style="list-style:initial !important" class="padding">
<li>Number of participants - 8+4.</li>
<li>Duration- 6+2 minutes.</li>
<li>Points shall be deducted for exceeding the time limit.</li>
<li>Vulgarity of any kind will not be entertained and will lead to disqualification.</li>
<li>School representatives must have a back-up CD or external storage device.</li>
<li>Original CD or external storage device must be submitted at the registration desk, a day before the event.</li>
<li>One representative from each school should be present at the technical forum prior to the performance.</li>
<li>Each school must carry their own props.</li>
<li>Bollywood songs are not allowed.</li>
<li>No offensive language should be there in the songs.</li>
<li>The performance should be limited to the stage.</li>
<li>Chewing gum on stage is strictly prohibited.</li>
<li>Judging Criteria:</li>
<li>Theme.</li>
<li>Choreography.</li>
<li>Coordination.</li>
<li>Costume (Appropriateness to the theme and the school environment).</li>
<li>Executed within time.</li>
</ol>
</ion-item>
<ion-item ng-if="group.name == 16" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
<ol style="list-style:initial !important" class="padding">
<li> Number of participants – 10+2 (for backstage help).</li>
<li> Duration- 5+2 minutes.</li>
<li> All attire must follow norms of decency.</li>
<li> Any apparel that the judges consider obscene shall lead to immediate disqualification.
</li>
<li> Points shall be deducted for exceeding the time limit.</li>
<li> Vulgarity of any kind will not be entertained and will lead to disqualification.</li>
<li> School representatives must have a back-up CD or external storage device.</li>
<li> Original CD or external storage device must be submitted at the registration desk, a day before the event.</li>
<li> One representative from each school should be present at the technical forum prior to the performance.</li>
<li> Bollywood songs are not allowed.</li>
<li> No offensive language should be there in the songs.</li>
<li> Judging criteria:</li>
<li> Depiction of theme.</li>
<li> Music.</li>
<li> Wardrobe coordination.</li>
<li> Ramp walk.</li>
<li> Choreography.</li>
</ol>
</ion-item>
<ion-item ng-if="group.name == 17" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
<ol style="list-style:initial !important" class="padding">
<li> Number of participants - 4-7.</li>
<li> Duration 7+2 minutes.</li>
<li> The time allotted includes time for sound check.</li>
<li>Use of any kind of inappropriate language or vernacular language will lead to immediate disqualification.</li>
<li> Participants are to perform in their school uniforms.</li>
<li> Pre-Recorded music of any kind will not be allowed.</li>
<li> The drum kit shall be provided by the school.</li>
<li> Judging criteria:</li>
<li> Vocals.</li>
<li> Instruments.</li>
<li>Synchronization.</li>
<li>Audience Appeal/Expression.</li>
<li>Delivery.</li>
<li> Audience Encore.</li>
</ol>
</ion-item>
<ion-item ng-if="group.name == 18" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
<ol style="list-style:initial !important" class="padding">
<li> Number of participants – 1.</li>
<li> Duration – 8+2 minutes.</li>
<li> No Bollywood tracks will be allowed.</li>
<li> There is a compulsion of a minimum of two genres.</li>
<li> Participants are not allowed to go in front of the console.</li>
<li> Music containing foul language or objectionable words will lead to disqualification.
</li>
<li> Increasing the master volume unnecessarily is not allowed.</li>
<li> Playing pre-recorded sets and mashups will lead to disqualification.</li>
<li> Judging Criteria:</li>
<li> Body Language.</li>
<li> Selection of Tracks.</li>
<li> Mixing and equalizing.</li>
<li> Interaction with the crowd.</li>
<li> Usage of effects.</li>
</ol>
</ion-item>
<ion-item ng-if="group.name == 19" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
<ol style="list-style:initial !important" class="padding">
<li> Number of participants- 1+1.</li>
<li>Duration – 2+1 minutes.</li>
<li>If the judges feel that the performance is vulgar, the participant will be disqualified immediately.</li>
<li>No foul language is to be used during the performance.</li>
<li> Communal or racist jokes, and innuendos are to be strictly avoided.</li>
<li> Judging Criteria:</li>
<li> Content.</li>
<li> Diction.</li>
<li> Expression.</li>
<li>Delivery.</li>
<li>Audience Encore.</li>
</ol>
</ion-item>
<ion-item ng-if="group.name == 21" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
<ol style="list-style:initial !important" class="padding">
<li>Number of participants- 1.</li>
<li>Duration</li>
<li> Recitation- 2+1 minutes.</li>
<li> Preparation- 1 hour.</li>
<li> Communal or racist pieces will lead to disqualification or negative marking.</li>
<li> Topics to be given on spot.</li>
</ol>
</ion-item>
<ion-item ng-if="group.name == 20" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
<ol style="list-style:initial !important" class="padding">
<li>Duration – 5+5 minutes.</li>
<li> 5-7 minutes for stage preparation.</li>
<li>CDs or external storage devices to be submitted at the registration desk on the day before the event.</li>
</ol>
</ion-item>
<ion-item ng-if="group.name == 22" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
<ol style="list-style:initial !important" class="padding">
<li>Number of participants- 2.</li>
<li> Duration- 2+1 minutes for speech and 1 minute for rebuttal.</li>
<li> One participant of each school will be a member of the proposition, and the other will be a member of the opposition.</li>
<li> Schools will be divided into groups on the basis of a lucky draw.</li>
<li> Topics will be given at the end of the first day of the fest.</li>
</ol>
</ion-item>
<ion-item ng-if="group.name == 23" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
<ol style="list-style:initial !important" class="padding">
<li>Number of participants- 2 +1 (to be present at the technical forum).</li>
<li> Duration- 5+2 minutes.</li>
<li> Topic will be given at the second representative’s meeting.</li>
</ol>
</ion-item>
<ion-item ng-if="group.name == 24" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
<ol style="list-style:initial !important" class="padding">
<li> Number of participants-1.</li>
<li> Duration- 2 hours.</li>
<li>Topics will be disclosed on the spot.</li>
<li> Participants are required to make at least 8 frames.</li>
<li> Paper will be provided on spot.</li>
<li>Participants are to bring their own stationary.</li>
<li> Judging criteria:</li>
<li> Composition.</li>
<li> Development of ideas.</li>
<li> Skill, technique and process.</li>
<li> Depth and breadth of composition.</li>
<li> Presentation of work.</li>
</ol>
</ion-item>
<ion-item ng-if="group.name == 25" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
<ol style="list-style:initial !important" class="padding">
<li>Number of participants-1+1+1 (Total: 3).</li>
<li>Duration- 1 hour.</li>
<li> Languages- English, Hindi and Bengali.</li>
<li> Topics will be disclosed on the spot.</li>
<li>Paper will be provided on spot. Participants are to bring their own stationary.</li>
<li>No electronic devices allowed.</li>
</ol>
</ion-item>
<ion-item ng-if="group.name == 26" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
<ol style="list-style:initial !important" class="padding">
<li>Number of participants-7 (5for Counter Strike and 2 for FIFA™).</li>
<li>Duration- On Spot.</li>
<li> Electronic devices, apart from headphones, are not allowed.</li>
<li>Use of colloquial language and signs is not permitted and will lead to disqualification.
</li>
</ol>
</ion-item>
<ion-item ng-if="group.name == 27" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
<ol style="list-style:initial !important" class="padding">
<li> Number of participants-2.</li>
<li> Duration- First two days of the fest.</li>
<li> Participants are to bring their own equipment and no additional help will be provided.
</li>
<li> The memory card of the camera should be empty.</li>
<li> Shooting only inside the school campus.</li>
<li> Judging criteria:</li>
<li> Concept.</li>
<li> Skill.</li>
<li> Editing.</li>
<li> Presentation.</li>
</ol>
</ion-item>
<ion-item ng-if="group.name == 28" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
<ol style="list-style:initial !important" class="padding">
<li>Number of participants-2.</li>
<li> Duration- 2 hours.</li>
<li> Paint and material to be brought by the participants.</li>
<li> Judging criteria:</li>
<li> Composition.</li>
<li> Development of ideas.</li>
<li> Skill, technique and process.</li>
<li> Depth and breadth of composition.</li>
<li> Presentation of work.</li>
</ol>
</ion-item>
<ion-item ng-if="group.name == 29" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
<ol style="list-style:initial !important" class="padding">
<li>Number of participants- 2. </li>
<li>Duration- 2 hours.</li>
<li> Participants are required to make 1 drink, 1snack/starter and 1 dessert.</li>
<li> Participants can place a requisition to the Heritan Representatives for the materials, ingredients and cutlerY and serving plates and glasses, at the end of the first day of the fest.</li>
<li> All meals must be prepared without any use of fire and no equipment such as induction cook-topcan be used.</li>
<li> Food should be vegetarian.</li>
<li> No type of alcohol should be used.</li>
<li> Refrigerator will be provided.</li>
<li> Boiled vegetables, prepared sauce and plain cakes/biscuits can be brought for the event.</li>
<li> Extra points will be awarded for good presentation and cleanliness on the working table.</li>
<li> Judging Criteria:</li>
<li> Taste, Flavour and Colour.</li>
<li> Table layout and presentation.</li>
<li> Originality.</li>
<li> Cleanliness.</li>
<li> Preparation time taken.</li>
</ol>
</ion-item>
<ion-item ng-if="group.name == 30" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
<ol style="list-style:initial !important" class="padding">
<li>Number of participants- 2.</li>
<li> Duration- Whole Day.</li>
<li> Participants have to bring their own camera.</li>
<li> The memory card of the camera should be empty.</li>
<li> Theme will be given on the spot.</li>
<li> Camera Model, Lens used, Shutter speed, Aperture, ISO, Metering, Mode, All these are the EXIFdetails.</li>
<li>Judging Criteria:</li>
<li> Originality.</li>
<li> Technical Excellence.</li>
<li> Composition.</li>
<li> Artistic Merit.</li>
<li> Overall impact.</li>
</ol>
</ion-item>
<ion-item ng-if="group.name == 31" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
<ol style="list-style:initial !important" class="padding">
<li>Number of participants - 2 (representative event).</li>
<li> Use of mobile phones or any other e-devices will lead to immediate disqualification.
</li>
</ol>
</ion-item>
<ion-item ng-if="group.name == 38" style="white-space:normal;text-align:justify;list-style:initial" class="item-accordion" ng-show="isGroupShown(group,{{group.name}},{{x.id}})">
<ol style="list-style:initial !important" class="padding">
<li>Number of participants- 4</li>
<li>15 minutes each for a maximum of 7 rounds.</li>
<li>All other laws of FIDE will be applied.</li>
</ol>
</ion-item>
</div>
</ion-list>
Please make sure you are formatting your code properly with markdown code blocks
does formatting the indentation makes the work ?
```
myExample
```
This is how you would format
So you might want to look into simplifying your markup.
You have a lot of conditionals that need to be processed. Multiply that for over 100 items…
Thats a lot of things that need to be done before render 
Had similar issue. I stripped out my html bits by bits and discovered has-header="true" padding="true" were making the app slow. Removed them and noticed considerable speed
There is another approach.
Create the html in js and after that just apply in html