title: `for` loop causes browser crash
body: <h2>how to access variable outside the scope of http in angularjs</h2>
  <p>I want to make a multi select drop-down that at first get the first 5 data from JSON and when click show more get more data from JSON.
  so I made a counter outside the $http and I want to update it after the first set of data is shown so I can use it in the loadMore function to continue counting but the variable is not updating. whenever I click on &quot;load more&quot; my browser crashes. my code is this:</p>
  <pre><code>var counter = 0;
  $http({
          method: &quot;GET&quot;,
          url: &quot;data.json&quot;
      })
      .then(function onSuccess(response) {
          var innerCounter = counter;
          for (var i = 0; i &lt; 4; i++) {
              $scope.data.push(response.data[i]);
              innerCounter++;
          }
          counter = innerCounter;
          console.log($scope.data);
      })
      .catch(function onError(response) {
          console.log(&quot;error&quot;);
      });
  console.log(counter);
  
  $scope.loadMore = function() {
  
  $http({
      method: &quot;GET&quot;,
      url: &quot;data.json&quot;
    })
    .then(function onSuccess(response) {
      var innerCounter = counter;
      for (var i = innerCounter; i &lt; (innerCounter+5); i++) {
        $scope.data.push(response.data[i]);
        innerCounter++;
      }
      counter = innerCounter;
  
    })
    .catch(function onError(response) {
      console.log(&quot;error&quot;);
    });
  </code></pre>
  <p>};
  and my json is:</p>
  <pre><code>[
  {
      &quot;item&quot;: &quot;South Korea&quot;,
      &quot;category&quot;: &quot;Asia&quot;,
      &quot;flag&quot;: false
  },
  {
      &quot;item&quot;: &quot;England&quot;,
      &quot;category&quot;: &quot;Europe&quot;,
      &quot;flag&quot;: false
  },
  {
      &quot;item&quot;: &quot;Japan&quot;,
      &quot;category&quot;: &quot;Asia&quot;,
      &quot;flag&quot;: false
  },
  {
      &quot;item&quot;: &quot;Denmark&quot;,
      &quot;category&quot;: &quot;Europe&quot;,
      &quot;flag&quot;: false
  },
  {
      &quot;item&quot;: &quot;North Korea&quot;,
      &quot;category&quot;: &quot;Asia&quot;,
      &quot;flag&quot;: false
  },
  {
      &quot;item&quot;: &quot;Geramany&quot;,
      &quot;category&quot;: &quot;Europe&quot;,
      &quot;flag&quot;: false
  },
  {
      &quot;item&quot;: &quot;China&quot;,
      &quot;category&quot;: &quot;Asia&quot;,
      &quot;flag&quot;: false
  },
  {
      &quot;item&quot;: &quot;Spain&quot;,
      &quot;category&quot;: &quot;Europe&quot;,
      &quot;flag&quot;: false
  },
  {
      &quot;item&quot;: &quot;India&quot;,
      &quot;category&quot;: &quot;Asia&quot;,
      &quot;flag&quot;: false
  },
  {
      &quot;item&quot;: &quot;Italy&quot;,
      &quot;category&quot;: &quot;Europe&quot;,
      &quot;flag&quot;: false
  },
  {
      &quot;item&quot;: &quot;Tailand&quot;,
      &quot;category&quot;: &quot;Asia&quot;,
      &quot;flag&quot;: false
  },
  {
      &quot;item&quot;: &quot;Portugal&quot;,
      &quot;category&quot;: &quot;Europe&quot;,
      &quot;flag&quot;: false
  }
  ]
  </code></pre>
  <p>and my whole code is as follow.
  thanks in advance.</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 app = angular.module("myApp", []);
  
  app.controller("myCtrl", function($scope, $http) {
  
    var counter = 0;
    $http({
        method: "GET",
        url: "data.json"
      })
      .then(function onSuccess(response) {
        var innerCounter = counter;
        for (var i = 0; i &lt; 4; i++) {
          $scope.data.push(response.data[i]);
          innerCounter++;
        }
        counter = innerCounter;
        console.log($scope.data);
      })
      .catch(function onError(response) {
        console.log("error");
      });
    console.log(counter);
  
    $scope.loadMore = function() {
  
      $http({
          method: "GET",
          url: "data.json"
        })
        .then(function onSuccess(response) {
          var innerCounter = counter;
          for (var i = innerCounter; i &lt; (innerCounter+5); i++) {
            $scope.data.push(response.data[i]);
            innerCounter++;
          }
          counter = innerCounter;
  
        })
        .catch(function onError(response) {
          console.log("error");
        });
  
    };
  
    $scope.selectEnable = false;
    $scope.selectedItems = [];
    $scope.openSelect = function() {
      $scope.selectEnable = !$scope.selectEnable;
    };
  
  
    $scope.itemChecked = function(data) {
  
  
      var selected = $scope.selectedItems.indexOf(data.item);
      if (selected == -1) {
        $scope.selectedItems.push(data.item);
      } else {
        $scope.selectedItems.splice(selected, 1);
      }
    };
  
  
    $scope.filter = function() {
      if (!$scope.searchField) {
        $scope.data2Show = angular.copy($scope.data);
        /* if searchField is empty make a copy of our data */
      } else {
  
        $scope.data2Show = [];
        $scope.data.map(function(itm) {
          if (itm.item.indexOf($scope.searchField) != -1) {
            $scope.data2Show.push(itm);
          }
        });
      }
    };
  
  
  
  
  
    $scope.data2Show = [];
    $scope.data = [];
  
  
  
    //$scope.filter();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul li {
    list-style: none;
    text-align: center;
  }
  
  ul {
    height: 100px;
    overflow-y: scroll;
  }
  
  #loadMore {
    text-align: center;
    color: #aaa;
    background: #ddd;
    cursor: pointer;
  }
  
  #category {
    text-align: center;
    background: #ddd;
  }
  
  #listContainer {
    width: 20%;
  }
  
  span {
    cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" ng-app="myApp"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="stylesheet/style.css"&gt;
  &lt;/head&gt;
  
  &lt;body ng-controller="myCtrl"&gt;
  
    &lt;input type="text" ng-click="openSelect()"&gt;
    &lt;div id="selectContainer" ng-show="selectEnable"&gt;
      &lt;div&gt;{{selectedItems.toString()}}&lt;/div&gt;
      &lt;input type="text" id="searchField" ng-model="searchField" ng-change="filter()"&gt;
      &lt;div id="listContainer"&gt;
        &lt;ul id="innerContainer"&gt;
          &lt;li ng-repeat="data in data2Show"&gt;
  
            &lt;input type="checkbox" ng-change="itemChecked(data)" name="select" ng-model="data.flag" ng-checked="isChecked(data)"&gt; {{data.item}}
          &lt;/li&gt;
          &lt;li id="loadMore" ng-click="loadMore()"&gt;
            load more
          &lt;/li&gt;
  
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;script src="script/script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>