Angular Js performance and load time
<p>I am working on Angular Js web app using Laravel 5.2 as API and I have a big issue in the performance specially in the load time of the home page.</p>

<p>I have a request that get 5 sections from database, each section has one or tow items and each item has many comments. I loop through sections then items then comments to render it via nested <code>ng-repeat</code> directive.</p>

<p>I also have a list of filters and another of friends each has its own request and <code>ng-repeat</code> to render it as well.</p>

<p>Is this considerable as huge data to use over Angular JS, How I can enhance the performance of it?</p>

<p>I also have about 20 modules in the dependencies of the main module, Is there a better way to load this module only when I need them?</p>

<p>Notes: </p>

<ol>
<li>Angular Js version 1.5.1</li>
<li>Angular Js and jQuery loaded via CDN</li>
<li>all other js files are concatenated by GULP.js in one file and it about 66000 lines of code</li>
<li>there is 25 module in the dependencies array of the main module</li>
<li>the time of load is about 25-35 seconds</li>
</ol>

<p>here is code of my home page section that cause the issue:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>        &lt;div ng-class="{'col-sm-6':currentUser,'col-sm-9':!currenUser}" fc-loading="getCoupons" class="allCoupons lbm"&gt;
            &lt;section class="fc-section text-center fc-direction" ng-init='current="all"'&gt;
                &lt;button type="button" class='btn  btnp btnm0 srm' ng-class='{"btnr":current=="all"}' ng-click='updateCoupons();current="all"' name="button"&gt;كل الكوبونات&lt;/button&gt;
                &lt;button type="button" class='btn btnp  btnm0' ng-class='{"btnr":current=="my"}' ng-click='updateCoupons("user");current="my"' name="button"&gt;الكوبونات المخصصة لك &lt;/button&gt;
            &lt;/section&gt;

                &lt;div  ng-repeat='(key,section) in coupon_sections' class="{{key}} fc-programs"&gt;
                    &lt;div class="header"&gt;
                        &lt;div class="clearfix"&gt;
                            &lt;h3 class="pull-left"&gt;{{::section.type}}&lt;/h3&gt;
                            &lt;ul ng-init="active = 'newset'" class="pull-right"&gt;
                                &lt;li ng-click="sortCoupons(1,key); active='newset'" ng-class="{active:active == 'newset'}"&gt;&lt;span&gt;{{::'sort_by.newest'| translate}}&lt;/span&gt;&lt;/li&gt;
                                &lt;li ng-click="sortCoupons(2,key); active='oldset'" ng-class="{active:active == 'oldset'}"&gt;&lt;span&gt;{{::'sort_by.oldest'| translate}}&lt;/span&gt;&lt;/li&gt;
                                &lt;li ng-click="sortCoupons(3,key); active='popular'" ng-class="{active:active == 'popular'}"&gt;&lt;span&gt;{{::'sort_by.popular'| translate}} &lt;/span&gt;&lt;/li&gt;
                            &lt;/ul&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="fc-section"&gt;
                      &lt;p&gt;
                        {{::section.description}}
                      &lt;/p&gt;

                    &lt;/div&gt;
                    &lt;div class="lucky_hour centerContainer" ng-if='key =="luckyHour"' ng-init='getTimeRemaining("December 31 2016 23:59:59 GMT+0200")'&gt;
                      &lt;div class="centerContent"&gt;
                        &lt;ul&gt;
                          &lt;li class="hh" ng-repeat='hour in hours track by $index'&gt;{{hour}}&lt;/li&gt;
                          &lt;li class="dots"&gt;:&lt;/li&gt;
                          &lt;li class="mm" ng-repeat="minute in minutes track by $index"&gt;{{minute}}&lt;/li&gt;
                          &lt;li class="dots"&gt;:&lt;/li&gt;
                          &lt;li class="ss" ng-repeat="second in seconds track by $index"&gt;{{second}}&lt;/li&gt;
                        &lt;/ul&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;section class="fc-section text-center" ng-if="!section.coupons.length "&gt;
                        &lt;p class="title"&gt;{{::'no_coupons'| translate}}&lt;/p&gt;
                    &lt;/section&gt;
                    &lt;div ng-repeat="coupon in section.coupons"&gt;
                        &lt;fc-coupon ng-init='showCarousel();'&gt;&lt;/fc-coupon&gt;
                    &lt;/div&gt;
                    &lt;div class="text-center" ng-if="section.coupons.length "&gt;
                        &lt;button  class="btnloadmore icon-plus-circled btni lbm" ng-click="loadMore(key)"&gt;{{::'load_more'| translate}}&lt;/button&gt;
                    &lt;/div&gt;


                &lt;/div&gt;


        &lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>here is the fc-coupon template</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="fc-coupon lbm" id='{{coupon.coupon_data.slug}}'&gt;

    &lt;div class="header bb"&gt;
      &lt;div class="rippon"&gt;
{{::coupon.coupon_data.type}}      &lt;/div&gt;
        &lt;img  style="background-image: url('{{::absolute_url+'images/brands/100x100/'+ coupon.brand_data.logo }}')" /&gt;

        &lt;h3&gt;{{::coupon.brand_data.name}}&lt;/h3&gt;
        &lt;fc-stars   rating="{{::coupon.coupon_data.rate}}" &gt;&lt;/fc-stars&gt;
        &lt;div class="pull-right"&gt;
            &lt;!-- &lt;label&gt;{{::'available_for'| translate}}&lt;/label&gt; --&gt;
            &lt;div class="fc-badge sPadges" ng-repeat="customer in ::coupon.coupon_data.users_type"&gt;
                &lt;img uib-tooltip="{{:: 'available_for' | translate}} {{::customer.name.name}}" ng-src="{{::absolute_url}}/images/customer-types/50x50/{{customer.image}}"&gt;
            &lt;/div&gt;


        &lt;/div&gt;

    &lt;/div&gt;
    &lt;div class="sp" ng-if='key !="challenges"'&gt;
      &lt;h4&gt;{{::coupon.coupon_data.title}}&lt;/h4&gt;
      &lt;p hm-read-more
         hm-text="{{:: coupon.coupon_data.description }}"
         hm-limit="100"
         hm-more-text="{{::'read_more'|translate}}"
         hm-less-text="{{::'read_less'|translate}}"
         hm-dots-class="dots"
         hm-link-class="links" class="sbm mtp "&gt;&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="sp mtp" ng-if='key =="challenges"'&gt;
      &lt;p&gt;
        &lt;i class="fc-red icon-award"&gt;&lt;/i&gt; &lt;span class="fc-purple srm"&gt;التحدي &lt;/span&gt;
        {{::coupon.coupon_data.challenges.name}}
      &lt;/p&gt;
      &lt;p&gt;
        &lt;i class="fc-red icon-gift"&gt;&lt;/i&gt; &lt;span class="fc-purple srm"&gt;الجائزة &lt;/span&gt;
          &lt;span&gt;{{::coupon.coupon_data.type}}&lt;/span&gt;
      &lt;/p&gt;

    &lt;/div&gt;
    &lt;div class="couponImage"&gt;
        &lt;div class="fc-overlay centerContainer"&gt;
            &lt;div class="centerContent"&gt;
                &lt;i ng-if="coupon.coupon_data.in_wallet" class="icon-heart"&gt;&lt;/i&gt;
                &lt;i ng-if="!coupon.coupon_data.in_wallet" ng-click="addToMyCoupons(coupon.coupon_data)" class="icon-heart-empty"&gt;&lt;/i&gt;

                &lt;label&gt;{{::coupon.coupon_data.no_of_users_in_wallet }}&lt;/label&gt;

            &lt;/div&gt;
            &lt;div class="couponFooter"&gt;
                &lt;a href="{{::absolute_url}}/{{lang}}/coupon/{{coupon.slug}}"&gt;{{::'details'| translate}}&lt;/a&gt;
                &lt;ul class="socials"&gt;
                    &lt;li&gt;&lt;span ng-click="shareCoupon(coupon.coupon_data.slug,'facebook')" spantarget="_blank" class="icon-facebook"&gt;&lt;/span&gt; &lt;/li&gt;
                    &lt;li&gt;&lt;span ng-click="shareCoupon(coupon.coupon_data.slug,'twitter')" class="icon-twitter"&gt;&lt;/span&gt; &lt;/li&gt;
                    &lt;li&gt;&lt;span ng-click="shareCoupon(coupon.coupon_data.slug,'gplus')" class="icon-gplus"&gt;&lt;/span&gt; &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;img ng-src="{{::absolute_url}}/images/coupons/747x390/{{coupon.coupon_data.image}}"/&gt;
    &lt;/div&gt;
    &lt;div class="couponDetails sp"&gt;

        &lt;div class="owl-carousel mbm"&gt;
            &lt;div class="item " ng-repeat="friend in ::coupon.coupon_data.coupon_users"&gt;
                &lt;div style="background-image: url('{{::absolute_url}}/images/users/75x75/{{friend.picture}}')" class="roundImages mProfilePics"&gt;&lt;/div&gt;
            &lt;/div&gt;


        &lt;/div&gt;
        &lt;div   ng-init="coupon.coupon_data.isMapCollapsed =true;coupon.coupon_data.isMapOpened=false"&gt;
        &lt;div class="clearfix  bb mbp mtp bt sbm" &gt;
            &lt;div class="pull-left srm"   ng-click="openBranches(coupon.coupon_data)"&gt;
                &lt;i class="icon-location"&gt;&lt;/i&gt;
                &lt;label&gt;{{::'branches'| translate}} {{::coupon.coupon_data.no_of_branches}}&lt;/label&gt;
            &lt;/div&gt;

            &lt;div class="pull-left"&gt;
                &lt;i ng-class="{'icon-cancel':coupon.coupon_data.feed_w_estafeed_id ==null,'icon-ok':coupon.coupon_data.feed_w_estafeed_id != null}"&gt;&lt;/i&gt;
                &lt;label&gt;{{::'benefit'| translate}}&lt;/label&gt;
            &lt;/div&gt;
            &lt;div class="pull-right"&gt;
              &lt;i class="icon-share"&gt;&lt;/i&gt;

              &lt;label for=""&gt;{{::'share'| translate}} :&lt;/label&gt;
                &lt;i class="icon-facebook" ng-click='shareCoupon(coupon.coupon_data.slug,"facebook")'&gt;&lt;/i&gt;
                &lt;i class="icon-twitter" ng-click='shareCoupon(coupon.coupon_data.slug,"twitter")'&gt;&lt;/i&gt;
            &lt;/div&gt;
        &lt;/div&gt;
            &lt;div class="fc-map " uib-collapse="coupon.coupon_data.isMapCollapsed" &gt;

            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="clearfix"&gt;

          &lt;div class="buttons add_to_my_coupones pull-right"&gt;
              &lt;button ng-if="coupon.coupon_data.in_wallet  " type="button" class="btn btnr btnp btni" ng-click='couponConditions(coupon.coupon_data.slug)'&gt;{{::'in_my_coupons'| translate}}&lt;/button&gt;
              &lt;a ng-if="!coupon.coupon_data.in_wallet &amp;&amp; key=='challenges' " href='{{absolute_url}}/{{lang}}/coupons/{{coupon.coupon_data.slug}}/{{coupon.coupon_data.challenges.title}}'  class="btn btnr btnp btni" &gt;ابدء التحدي&lt;/a&gt;
              &lt;button ng-if="!coupon.coupon_data.in_wallet &amp;&amp; key!='challenges'" analytics-on="click" analytics-event="addToMyCoupons" analytics-properties="{coupon_id:{{coupon.coupon_data.coupon_id}}}" ng-click="addToMyCoupons(coupon.coupon_data)" class="btn btnr btnp btni icon-heart"&gt;{{::'add_to_my_coupones'| translate}}&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="pull-left"&gt;
            &lt;i class="icon-calendar"&gt;&lt;/i&gt;
            &lt;label class="srm"&gt;{{::'available_to' | translate}}&lt;/label&gt;
            &lt;!-- &lt;fc-countdown date='coupon.coupon_data.available_to.date'&gt;&lt;/fc-countdown&gt; --&gt;

          &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class="fc-couponComments" &gt;
            &lt;!-- &lt;span&gt;{{coupon.comments.length}} {{::'comments'|translate}}&lt;/span&gt; --&gt;
            &lt;button  ng-init="isCollapsed = true;" ng-click="isCollapsed = !isCollapsed;"&gt;&lt;i class="icon-comment-1"&gt;&lt;/i&gt; &lt;/button&gt;
            &lt;ul uib-collapse="isCollapsed" &gt;
                &lt;li&gt;
                    &lt;img src="{{ currentUser?absolute_url+'/images/users/50x50/'+currentUser.picture:absolute_url+'/images/user.png'}}"/&gt;
                    &lt;div class="userComment"&gt;
                        &lt;textarea ng-model="addComment.newComment" ng-enter="sendComment(coupon)"&gt;&lt;/textarea&gt;
                    &lt;/div&gt;
                &lt;/li&gt;
                &lt;li ng-repeat="comment in coupon.coupon_data.comments track by $index"&gt;
                    &lt;img ng-src="{{::absolute_url}}/images/users/50x50/{{::comment.user.picture}}"/&gt;
                    &lt;p&gt;
                        &lt;label&gt;{{::comment.user.firstname}} {{::comment.user.lastname}}&lt;/label&gt;
                        &lt;span&gt; {{::comment.comment}} &lt;/span&gt;
                        &lt;label&gt;{{::comment.created_at}}&lt;/label&gt;
                    &lt;/p&gt;
                &lt;/li&gt;

            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;

&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>home controller js :</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var url = user ? "user/home/coupons" : "home/coupons";

fcDB.query(url, "GET", data).success(function(res) {
    console.log('home', res);
    $scope.coupon_sections = res;
});</code></pre>
</div>
</div>
</p>