title: Angular js way to download file and show loading screen using the $resource
body: <p>I am using Angular js to show loading screen. It works for all the REST services call except REST service to download the file. I understand why it is not working because for download I am not making any service call using $resource; instead of that I am using normal  approach to download the file therefore Angular js code doesn't have any control on start/finish the service request. I tried to use $resource to hit this REST service however I am getting the data from this service and in this case loading screen was working fine however not sure how to use this data to display to user to download in angular way. Following are required details. Please help.</p>
  
  <p><strong>Approach 1 using iframe approach:</strong> </p>
  
  <pre><code> /*Download file */
              scope.downloadFile = function (fileId) {
                  //Show loading screen. (Somehow it is not working)
                  scope.loadingProjectFiles=true;
                  var fileDownloadURL = "/api/files/" + fileId + "/download";
                  downloadURL(fileDownloadURL);
                //Hide loading screen
                  scope.loadingProjectFiles=false;
              };
  
              var $idown;  // Keep it outside of the function, so it's initialized once.
              var downloadURL = function (url) {
                  if ($idown) {
                      $idown.attr('src', url);
                  } else {
                      $idown = $('&lt;iframe&gt;', { id: 'idown', src: url }).hide().appendTo('body');
                  }
              };
  </code></pre>
  
  <p><strong>Approach 2 using $resource (Not sure how to display data on screen to download)</strong></p>
  
  <pre><code>/*Download file */
              scope.downloadFile = function (fileId) {
                  //Show loading screen (Here loading screen works).  
                  scope.loadingProjectFiles=true;                 
                    //File download object
                      var fileDownloadObj = new DownloadFile();
                   //Make server call to create new File
                      fileDownloadObj.$get({ fileid: fileid }, function (response) {
                          //Q? How to use the response data to display on UI as download popup
                          //Hide loading screen
                          scope.loadingProjectFiles=false;
                      });
  
              };
  </code></pre>