how to create a dynamic template using angularjs with json

Sure.

'use strict';

angular.module('myModule',[]).run(['$templateCache',function($templateCache){
        $templateCache.put('template/example.html',
        '<h1>This is a template</h1>' +
        '<p>You can put any html that you like in this string</p>' +
        '<p> Please be mindful that it will need an attached scope for' +
        'any dynamic activity, basically it's a web page build in the script.</p>'
        );
    }
]);

It's as easy as that.

Edit:

I realize from your question that you might not be looking for a template, but a directive. That's a different animal altogether.

This is a directive that I use to build out a cascading dropdown with angular ui-bootstrap and font-awesome using a Navigation object from the backend:

myApp.directive("navigation", function($compile) {

    return {
        restrict: 'E',
        replace: true,
        scope: {
            menu: '='
        },
        template: '<ul><li class="dropdown" ng-repeat="item in menu">' +
            '<a ng-if="item.Children == undefined" href="#{{item.LocalRoute}}"><i style="font-size:150%;" class="fa {{item.Icon}} fa-fw"></i>&nbsp;&nbsp;{{item.Name}}</a>' +
            '<a ng-if="item.Children.length > 0" class="dropdown-toggle" data-toggle="dropdown" href="#"><i style="font-size:150%;" class="fa {{item.Icon}} fa-fw"></i>&nbsp;&nbsp;{{item.Name}}</a>' +
            '<navigation ng-if="item.Children.length > 0" class="dropdown-menu" menu="item.Children"></navigation>' +
            '</li></ul>',
        compile: function(el) {
            var contents = el.contents().remove();
            var compiled;
            return function(scope, el) {
                if (!compiled)
                    compiled = $compile(contents);

                compiled(scope, function(clone) {
                    el.append(clone);
                });
            };
        }
    };
})

and this is called by putting a <navigation menu='$scope.Navigation' /> tag in the markup, assuming that you have a Navigation object designed and pushed to the client. A directive will automatically create a child scope that can have values passed to it through the tag attributes. I would suggest googling Angular Directives.