Generate a HTML tag from a JSON with Angular

Here is a Fiddle

I created a directive that can render HTML elements based on the data you've given. It's not yet refined but I think this will work.

angular.forEach(scope.elements, function(value, key) {
    // create an element based on its type
    var newElement = document.createElement(value.type);
    // add the content
    newElement.innerHTML = value.content;

    for (attribute in value) {
        if (attribute != 'type' && attribute != 'content') {
            //apply attribute
            newElement.setAttribute(attribute, value[attribute]);
        }
    }
    element.append(newElement);
});

Limitations

• Nested elements are not handled by this code (further refinements can handle that)
• This could be vulnerable to injection attacks, so I suggest you use the ngSanitize module or something similar
• I'm not sure about the performance :)

This is to give you an idea that AngularJS can handle your concern.

Ok I came up with this solution, It's not elegant, but it works.

<div ng-repeat="element in elements">
  <div ng-if="element.type == 'p'">
    <p>{{element.content}}</p>
  </div>
  <div ng-if="element.type == 'blockquote'">
    <blockquote>
      {{element.content}}
      <span>by {{element.by}}</span>
     </blockquote>
  </div>
</div>

JsFiddle: http://jsfiddle.net/rdgda4pp/1/

Here is how I would proceed :

First of all you need to fetch the data inside a controller an expose them to the view using the $scope :

angular.module('app').controller('BlogCtrl', ['$scope', '$http', function($scope, $http){

$http({method: 'GET',url: '/blog/1/data'}).
        success(function (data) {
            if (data) {
                $scope.content = data;
            }
        })
      .error(function (error) {
          console.warn("Unable to retrieve data for this article");
      });

});

Inside your view, you would use your custom directive (we will come to it in a second) :

<div data-ng-controller="BlogCtrl">
  <dynamic-tag content="tag" ng-repeat="tag in content"></dynamic-tag >
</div>

Now, we have to tackle the most 'difficult' part : the directive. Our custom directive will generate the DOM elements according to your JSON definition.

angular.module('app').directive("dynamicTag",
            ['$document', '$compile', function($document, $compile) {

                var getTemplate = function(tag){
                    var template = '';
                    if (tag.type === 'p')
                     template += angular.element('<p>'+ tag.content + '</p>');
                    //Repeat and create elements for every tag you need to handle..

                    return template;
                }; 

                return {
                    restrict : 'E', 
                    replace: true,
                    scope: {
                        content:'=content'
                    },
                    link : function(scope, element, attrs) {                    
                        element.html(getTemplate(scope.content);
                        $compile(element.contents())(scope);
                    }
                };
            }]);

I have not tested my code, just wrote it from scratch. If you can't get it working, I can eventually make a plunker.