title: AngularJS $http calling infinitely
body: <p>Can someone explain why is the $http request sending infinite number of requests to the server?
  In my application, this code sends infinite requests to the server</p>
  
  <pre><code>(function(){
      var app = angular.module("GrahamsSocksProducts", ["ngCookies"]);
      app.controller("ProductsController", ["$controller", "$http", "$cookies", function($controller, $http, $cookies){
  .
  .
  .
  this.setCookie = function(){
          username = "Some random guy"
          alert(45)
  
          $http({
              method : "GET",
              url : "http://_____________",
              params : { username : username }
          }).then(function(){
              //do something
          })
      }
  </code></pre>
  
  <p>However, when I remove the http request, only a single request is passed to the server, like this : </p>
  
  <pre><code>.
  .    
  .
  this.setCookie = function(){
          username = "Some random guy"
          alert(45)
  }
  .
  .
  .
  </code></pre>
  
  <p>HTML : </p>
  
  <pre><code>&lt;div ng-app="GrahamsSocksProducts"&gt;
          &lt;div ng-controller="ProductsController as products"&gt;
          {{ products.setCookie() }}
              &lt;div class="row"&gt;
                  &lt;div ng-repeat="product in products.products"&gt;
                      &lt;div class="col-sm-4 col-lg-4 col-md-4"&gt;
                          &lt;div class="thumbnail"&gt;
                              &lt;img ng-src="{{products.getImageTag(product)}}"&gt;
                              &lt;div class="caption"&gt;
                                  &lt;h4 class="pull-right"&gt;${{ product.price }}&lt;/h4&gt;
                                  &lt;h4&gt;
                                      &lt;a href="#"&gt; {{ product.name }}&lt;/a&gt;
                                  &lt;/h4&gt;
                                  &lt;p&gt;{{ product.description }}&lt;/a&gt;.&lt;/p&gt;
                                  &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="ratings"&gt;
                          &lt;p class="pull-right"&gt;{{ product.ratings }} / 5&lt;/p&gt;
                          &lt;p&gt;
                                  &lt;span ng-class="products.getStarColor(product.ratings, 1)" ng-click="product.ratings=1"&gt;&lt;/span&gt;
                                  &lt;span ng-class="products.getStarColor(product.ratings, 2)" ng-click="product.ratings=2"&gt;&lt;/span&gt;
                                  &lt;span ng-class="products.getStarColor(product.ratings, 3)" ng-click="product.ratings=3"&gt;&lt;/span&gt;
                                  &lt;span ng-class="products.getStarColor(product.ratings, 4)" ng-click="product.ratings=4"&gt;&lt;/span&gt;
                                  &lt;span ng-class="products.getStarColor(product.ratings, 5)" ng-click="product.ratings=5"&gt;&lt;/span&gt;
                          &lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;button class="btn btn-primary" ng-click="products.addToCart(product)"&gt;Add to Cart&lt;/button&gt;
                          &lt;button class="btn btn-default"&gt;Checkout&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-12"&gt;
                      &lt;div class="container"&gt;                 
                          &lt;div class="jumbotron"&gt;
                              &lt;ul class="list-group"ng-repeat="cartProduct in products.getCartNameAndQuantity()"&gt;
                                  &lt;li class="list-group-item"&gt;{{ cartProduct.name }}  ({{ cartProduct.quantity }})&lt;/li&gt;
                              &lt;/ul&gt;
                              Cart products price : {{ products.getCartPrice() }}
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I have read other questions such as this:
  <a href="https://stackoverflow.com/questions/25231413/infinite-loop-when-trying-to-make-angularjs-display-a-promise">Infinite loop when trying to make Angularjs display a promise</a>
  They have answered about how AngularJS allows two-way data-binding but in this case, when the $http code is removed, the request is sent once, otherwise infinite times.</p>