It seems to me that there's really no reason to reinvent the wheel here... why can't you just use a fully supported WYSIWYG editor like TinyMCE? It's got an angular extension through the Angular-UI project here:
https://github.com/angular-ui/ui-tinymce
Then you could write this in your html:
<textarea ui-tinymce="tinyMceOptions" ng-model="parsedResponse"></textarea>
<button ng-click="convertToPdf()">Y U NO DOWNLOAD PDF?</button>
In your controller (or directive):
$scope.tinyMceOptions = {/*Customize here*/};
$scope.parseMyResponse = function(data) {
// do something with data and return as html string
return data;
};
$http.get('/your/resource/url').success(function(result) {
$scope.parsedResponse = $scope.parseMyResponse(result);
});
$scope.convertToPdf = function() {
// do something with $scope.parsedResponse here to get a PDF
};
Edit: I guess I didn't get what you were asking exactly at first? If you want it in a service all you have to do is something like:
angular.module('app')
.service('Util', function() {
return {
wrapInTag: function(tagName, value) {
return '<' + tagName + '>' + value + '<' + tagName + '/>';
},
parseMyResource: function(response) {
htmlString = '';
angular.each(response, function(item) {
htmlString += this.wrapInTag('h1', item.title);
htmlString += this.wrapInTag('b', item.id);
// Other manipulation...
});
return htmlString;
}
};
});
Then in your controller:
angular.module('app')
.controller('MyCtrl', function(Util){
// Use Util functions here...
});
I've given you some example code for parsing JSON into HTML strings, but I'm afraid I couldn't be more specific as to how to write it. The logic if your parsing function really depends on what you're trying to accomplish as well as what your data model looks like. There's really no straight-forward way to convert JSON to HTML.