title: Need a progress bar for $http method in angularjs 1.6.5
body: <p>what I am trying to do is add a progress bar to my template that will dynamically keep on updating its value according to the progress of my file upload. I have used angular-loading-bar but I want to have my own for the following $http request:-</p>
  
  <pre><code>        $http.patch(url, fd, {
              transformRequest: angular.identity,
              headers: {'Content-Type': undefined}
          }).then(successCallback, errorCallback);
          function successCallback(response){
              console.log("Success");
              console.log(response);
          };
          function errorCallback(error){
              alert("Error Uploading!");
              console.log(error);
          };
  </code></pre>
  
  <p>And I want to update my following progressbar:-</p>
  
  <pre><code>&lt;div class="progress"&gt;
       &lt;div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="{{ progress }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ progress }} %"&gt;
          {{ progress }} %
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Where the <code>{{ progress }}</code> should be my file upload percentage value. Thanks in advance.</p>