title: Percentage Loading Time in angular js with $http request
body: <p>I am using angular with rails application</p>
  
  <p>I have a demo app. I need to show response time required to load a response in angular</p>
  
  <p>As an example.</p>
  
  <p>I am loading a response of array of 100 k elements. I want to show percentage start from 0% and increment as response load. When full response loaded then it completes response time 100%</p>
  
  <p>Details of using files</p>
  
  <p>/app/views/layouts/application.html.erb</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Anguler&lt;/title&gt;
  &lt;%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' =&gt; true %&gt;
  &lt;%= javascript_include_tag 'application', 'data-turbolinks-track' =&gt; true %&gt;
  &lt;%= csrf_meta_tags %&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;%= yield %&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>/app/views/pages/index.html.erb</p>
  
  <pre><code>&lt;div ng-app="myApp" ng-controller="customersCtrl"&gt;
      &lt;ul&gt;
          &lt;li ng-repeat="x in myData"&gt;
              {{ x }}
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>/app/controllers/pages_controller.rb</p>
  
  <pre><code>class PagesController &lt; ApplicationController
     def index
         @arr = []
         for n in 1..100000
             @arr.push(n)
         end
         return render json: @arr
     end
  end
  </code></pre>
  
  <p>/app/controllers/application_controller.rb</p>
  
  <pre><code>class ApplicationController &lt; ActionController::Base
      # Prevent CSRF attacks by raising an exception.
      # For APIs, you may want to use :null_session instead.
      protect_from_forgery with: :exception
  end
  </code></pre>
  
  <p>/assets/javascripts/application.js</p>
  
  <pre><code>//= require jquery
  //= require jquery_ujs
  //= require turbolinks
  //= require angular.min
  //= require custom.min
  </code></pre>
  
  <p>/assets/javascripts/custom.js</p>
  
  <pre><code>var app = angular.module('myApp');
  app.controller('customersCtrl', function($scope, $http) {
      $http.get("/").then(function (response) {
          $scope.myData = response.data.records;
      }
  });
  </code></pre>
  
  <p>Let me know how it could be possible to showing loading percentage time in percentage</p>
  
  <p>Many Thanks in advance</p>