title: When loading data using limit offset, controller functions going to crash and data is jammed in AngularJS
body: <p>I created a video gallery application like Youtube using AngularJS. There's a REST API and I am calling that REST URLs via Angular services.
  Here's are two controller files and they have most probably same functionality, but calling different URL to get different videos.</p>
  
  <p>This is BoxsetCtrl.js file and it get all the Boxset videos(a category name). This is the full controller file.</p>
  
  <p>angular.module('data_visualize')
      .controller('BoxsetCtrl', function ($scope, boxsetService) {</p>
  
  <pre><code>    $('html,body').scrollTop(0);
  
      $scope.allBoxsets = [];
      $scope.count2 = parseInt(0);
      $scope.scene = {
          sort2: "most_recent"
      };
  
      /**
       * Loading all the box sets with limit and offset.
       */
      boxsetService.viewAllBoxSetsByDate(0).then(function (data) {
          $scope.allBoxsets = data;
      });
  
      $scope.getSceneSortByValue = function () {
          $scope.count2 = parseInt(0);
          $scope.sort2Value = $scope.scene.sort2;
          console.log($scope.scene.sort2);
  
          if ($scope.sort2Value == 'most_recent') {
              boxsetService.viewAllBoxSetsByDate(0).then(function (data) {
                  $scope.allBoxsets = data;
              });
          } else if ($scope.sort2Value == 'popularity') {
              boxsetService.viewAllBoxSetsByPopularity(0).then(function (data) {
                  $scope.allBoxsets = data;
              });
          } else if ($scope.sort2Value == 'name') {
              boxsetService.viewAllBoxSetsByName(0).then(function (data) {
                  $scope.allBoxsets = data;
              });
          } else if ($scope.sort2Value == 'number_of_scenes') {
              boxsetService.viewAllBoxSetsByScenes(0).then(function (data) {
                  $scope.allBoxsets = data;
              });
          } else {
              boxsetService.viewAllBoxSetsByDate(0).then(function (data) {
                  $scope.allBoxsets = data;
              });
          }
      };
  
      $scope.getSelectedLetter = function (letter) {
          $scope.count2 = parseInt(0);
          $scope.scene.sort2 = "by_letter";
          $scope.selectedLetter = letter;
          console.log($scope.selectedLetter);
          boxsetService.viewAllBoxSetsByLetter(letter, 0).then(function (data) {
              $scope.allBoxsets = data;
          });
      };
  
      $scope.resetLetterFilter = function () {
          $scope.scene.sort2 = 'most_recent';
          boxsetService.viewAllBoxSetsByDate(0).then(function (data) {
              $scope.allBoxsets = data;
          });
      };
  
      $scope.loadByNumbers = function () {
          $scope.scene.sort2 = 'by_numbers';
          boxsetService.viewAllBoxSetsByNumber(0).then(function (data) {
              $scope.allBoxsets = data;
          });
      };
  
      $(window).scroll(function () {
          if ($(window).scrollTop() + $(window).height() &gt; $(document).height() - scrollZise) {
              $scope.count2 = $scope.count2 + 8;
              console.log("New count box set : ", $scope.count2);
  
              if ($scope.scene.sort2 == 'most_recent') {
                  boxsetService.viewAllBoxSetsByDate($scope.count2).then(function (data) {
                      for (var i = 0; i &lt; data.length; i++) {
                          $scope.allBoxsets.push(data[i]);
                      }
                  });
              } else if ($scope.scene.sort2 == 'popularity') {
                  boxsetService.viewAllBoxSetsByPopularity($scope.count2).then(function (data) {
                      for (var i = 0; i &lt; data.length; i++) {
                          $scope.allBoxsets.push(data[i]);
                      }
                  });
              } else if ($scope.scene.sort2 == 'name') {
                  boxsetService.viewAllBoxSetsByName($scope.count2).then(function (data) {
                      for (var i = 0; i &lt; data.length; i++) {
                          $scope.allBoxsets.push(data[i]);
                      }
                  });
              } else if ($scope.scene.sort2 == 'number_of_scenes') {
                  boxsetService.viewAllBoxSetsByScenes($scope.count2).then(function (data) {
                      for (var i = 0; i &lt; data.length; i++) {
                          $scope.allBoxsets.push(data[i]);
                      }
                  });
              } else if ($scope.scene.sort2 == 'by_letter') {
                  boxsetService.viewAllBoxSetsByLetter($scope.selectedLetter, $scope.count2).then(function (data) {
                      console.log("Sekected letter : ", $scope.selectedLetter);
                      for (var i = 0; i &lt; data.length; i++) {
                          $scope.allBoxsets.push(data[i]);
                      }
                  });
              } else if ($scope.scene.sort2 == 'by_numbers') {
                  boxsetService.viewAllBoxSetsByNumber($scope.count2).then(function (data) {
                      for (var i = 0; i &lt; data.length; i++) {
                          $scope.allBoxsets.push(data[i]);
                      }
                  });
              }
          }
      });
  
  });
  </code></pre>
  
  <p>This is a controller which loading Boxsets. And also there's another controller which uses to get some other scenes. Here's that controller.</p>
  
  <pre><code>angular.module('data_visualize')
  .controller('SceneCtrl', function ($scope, sceneService) {
  
      $('html,body').scrollTop(0);
  
      /**
       * Initializing and defining all the
       * arrays and variables.
       * @type {Array}
       */
      $scope.allScenes = [];
      $scope.count = parseInt(0);
      $scope.scene = {
          sort: "most_recent"
      };
  
      /**
       * Loading all the scenes with limit and offset.
       * Default page load invoke method for data set.
       */
      sceneService.viewAllScenesByDate(0).then(function (data) {
          $scope.allScenes = data;
      });
  
      $scope.getVideosByLetter = function (event) {
  
          console.log("Filter : ", $scope.filter);
  
          if ($scope.filter == "" || $scope.filter == null) {
              sceneService.viewAllScenesByDate(0).then(function (data) {
                  $scope.allScenes = data;
              });
          } else {
              $scope.scene = {
                  sort: "by_letter"
              };
              sceneService.viewAllScenesByLetter($scope.filter, 0).then(function (data) {
                  $scope.allScenes = data;
                  console.log(data);
              });
          }
      };
  
      /**
       * Get drop down value and send to server
       * in order to get the response.
       */
      $scope.getSceneSortByValue = function () {
          $scope.count = parseInt(0);
          $scope.sortValue = $scope.scene.sort;
          console.log($scope.sortValue);
  
          if ($scope.sortValue == 'most_recent') {
              sceneService.viewAllScenesByDate(0).then(function (data) {
                  $scope.allScenes = data;
              });
          } else if ($scope.sortValue == 'popularity') {
              sceneService.viewAllScenesByPopularity(0).then(function (data) {
                  $scope.allScenes = data;
              });
          } else if ($scope.sortValue == 'name') {
              sceneService.viewAllScenesByName(0).then(function (data) {
                  $scope.allScenes = data;
              });
          } else {
              sceneService.viewAllScenesByDate(0).then(function (data) {
                  $scope.allScenes = data;
              });
          }
      };
  
      /**
       * Detect window scroll and send request
       * to sever to get the real time pagination.
       */
      $(window).scroll(function () {
          if ($(window).scrollTop() + $(window).height() &gt; $(document).height() - scrollZise) {
              $scope.count = $scope.count + 8;
              console.log("NEW Count scene: ", $scope.count);
  
              if ($scope.scene.sort == 'most_recent') {
                  sceneService.viewAllScenesByDate($scope.count).then(function (data) {
                      for (var i = 0; i &lt; data.length; i++) {
                          $scope.allScenes.push(data[i]);
                      }
                  });
              } else if ($scope.scene.sort == 'popularity') {
                  sceneService.viewAllScenesByPopularity($scope.count).then(function (data) {
                      for (var i = 0; i &lt; data.length; i++) {
                          $scope.allScenes.push(data[i]);
                      }
                  });
              } else if ($scope.scene.sort == 'name') {
                  sceneService.viewAllScenesByName($scope.count).then(function (data) {
                      for (var i = 0; i &lt; data.length; i++) {
                          $scope.allScenes.push(data[i]);
                      }
                  });
              } else if ($scope.scene.sort == 'by_letter') {
                  sceneService.viewAllScenesByLetter($scope.filter, $scope.count).then(function (data) {
                      for (var i = 0; i &lt; data.length; i++) {
                          $scope.allScenes.push(data[i]);
                      }
                  });
              }
          }
      });
  
  });
  </code></pre>
  
  <p>These are two controllers which has two different views. When those views are scrolling, data is loading as Pagination. Here's a sample HTML code of HTML view. Data is loading with ng-repeat.</p>
  
  <pre><code>&lt;div ng-repeat="data in allBoxsets"&gt;
      &lt;div class="col-lg-3 col-md-4 col-xs-6"&gt;
          &lt;a class="thumbnail" href="#/boxset/{{data.seriesid}}"&gt;
              &lt;img class="img-responsive" src="lib/images/banner_selection/films/gallery/{{data.imagepath}}"
                   alt=""&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-lg-12"&gt;
                      {{data.seriesname}}
                  &lt;/div&gt;
                  &lt;div class="col-lg-12"&gt;
                      Views : {{data.views}}
                  &lt;/div&gt;
                  &lt;div class="col-lg-12"&gt;
                      Scenes : {{data.scenes}}
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But here's the problem, when I'm viewing Scenes using SceneCtrl, they are loading, but the problem is Boxset controller is also getting activated and when the page scrolls, those boxset requests are going to the server too. So it's really slow to load data. What's the problem for this? Is there any way to make this working properly.</p>
  
  <p>When I'm using Scenes, I only need to activate SceneCtrl and when I'm using Boxsets, I only need to use BoxsetCtrl. </p>
  
  <p>Any suggestions are welcome. </p>