title: AngularJS - can I display a document in a HTML file?
body: <p>I am looking for a solution to display a document in a mobile application I am developing using AngularJS and Cordova/Phonegap.</p>
  
  <p>I am using a Web Service that returns the raw content for a file, so for example I use my AngularJS service to use the Web Service to get a file, what it returns is the raw content of the file. In the case I show below it is a Word document. But it could be PDF, Excel, Powerpoint etc...</p>
  
  <p>I am relatively new to AngularJS and with only some experience with HTML and Javascript I am looking for guidance on the best approach to use the raw data from the web service to display the document inline in my application.</p>
  
  <p>Below is my current code and an image from my device to show what I am currently getting. My question is what is my best approach from here to get the document to a viewable state in the application?</p>
  
  <p>My service:</p>
  
  <pre><code>myApp.services.factory('DownloadDocResource', ['$resource', function    ($resource) {
       return $resource('http://myWebSerivceURL/Documents/myTestDoc.doc', {}, {'query':  {method: 'GET', isArray: false}});
  }]);
  
  myApp.services.factory('DownloadDocService', ['$q', 'DownloadDocResource', function($q, DownloadDocResource) {
  return {
      getDocument: function() {
          var delay = $q.defer();
          DownloadDocResource.query(
              function (response) {
                  delay.resolve(response);
              },
              function (response) {
                  delay.reject("can't get document source");
              });
          return delay.promise;
      }
  }
  }]);
  </code></pre>
  
  <p>My Controller:</p>
  
  <pre><code>myApp.controllers.controller("DownloadDocCtrl", ['$scope', 'DownloadDocService',
  function ($scope, DownloadDocService) {
      DownloadDocService.getDocument().then(function (document) {
          $scope.document = document;
      });
  }
  ]);
  </code></pre>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div style="color:#FFFFFF" ng-controller="DownloadDocCtrl"&gt;
  {{document}}
  &lt;/div&gt;
  </code></pre>
  
  <p>Outcome:</p>
  
  <p><img src="https://i.stack.imgur.com/5d640.png" alt="outcome"></p>