title: AngularJS $http ajax request is not asynchronous and causes page to hang
body: <p>I have a service where I am pulling data from server. When I click the button to send out the request to server through this service, the window freezes until I receive a response from server. Is there anything I can do to make this request asynchronous ?</p>
  
  <p>Here is my service.</p>
  
  <pre><code>app.factory('service', function($http) {
    return {
      getLogData : function(startTime,endTime){
        return $http({
          url:     baseURL + 'getLogData',
          method:  'GET',
          async:   true,
          cache:   false,
          headers: {'Accept': 'application/json', 'Pragma': 'no-cache'},
          params:  {'startTime': startTime , 'endTime': endTime}
        });
      }
    };
  )};
  </code></pre>
  
  <p>HTML.</p>
  
  <pre><code>&lt;button ng-click="getData()"&gt;Refresh&lt;/button&gt;
  &lt;img src="pending.gif" ng-show="dataPending" /&gt;
  </code></pre>
  
  <p>Code</p>
  
  <pre><code>$scope.getData = function(){
    service.getLogData().success(function(data){
      //process data
    }).error(function(e){
      //show error message
    });
  }
  </code></pre>