Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
  <div ng-repeat="element in dataArray" dynamic="element">
  </div>
</div>
</body>

JavaScript

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

myApp.controller('MyCtrl', function($scope) {

  $scope.dataArray = angular.fromJson('[{"htmlTemplate":"<div>{{name}}</div>","bindData":{"name":"safeer"}},{"htmlTemplate":"<span>{{name}}</span>","bindData":{"name":"john"}},{"htmlTemplate":"<h4>{{name}}</h4>","bindData":{"name":"james"}}]');

  console.log($scope.dataArray);
});

  myApp.directive('dynamic', function ($compile) {
  return {
    restrict: 'A',
    replace: true,
    link: function (scope, ele, attrs) {
      scope.bindData = {};
      scope.$watch(attrs.dynamic, function(dynamic) {
         console.log('Watch called');
        ele.html(dynamic.htmlTemplate); //here's your htmlTemplate being compiled
        $compile(ele.contents())(scope);
        scope.bindData = dynamic.bindData; //here's your bound data
        scope.name = dynamic.bindData.name;
      }, true); //deep watch
    }
  };
});