SO #34368006

by masa671

HTML

<script type="text/ng-template" id="repeater.html">
  <div>
    <div>
      <div ng-repeat="obj in rarray">
        <p bind-html-compile="htmlstring" class="control"></p>
      </div>
    </div>
  </div>
</script>
<div scocurepeater></div>

JavaScript

angular.module('myApp', [])
  .directive('scocurepeater', ['$compile',
    function($compile) {
      return {
        restrict: 'A',
        replace: true,
        scope: {
        },
        templateUrl: 'repeater.html',
        link: function(scope, element, attr, $compile) {
          //
          scope.rarray = [{
            "firstname": "employee1",
            "lastname": "last1",
            "department": "Dept1",
            "testdata": [{
              "col1": "column11",
              "col2": "column12"
            }, {
              "col1": "column21",
              "col2": "column21"
            }]
          }, {
            "firstname": "employee2",
            "lastname": "last2",
            "department": "Dept2"
          }, {
            "firstname": "employee3",
            "lastname": "last3",
            "department": "Dept3"
          }, {
            "firstname": "employee4",
            "lastname": "last4",
            "department": "Dept4"
          }];
          scope.htmlstring = "<div class='wrapper'><div class='left-wrapper'><img src='http://betanews.com/wp-content/uploads/2014/05/Enterprise-apps.jpg' width='50px' height='50px' >"
          scope.htmlstring = scope.htmlstring + "</div><div class='right-wrapper'><div class='top-right-wrapper'><strong>{{firstname}}</strong> </div><div class='top-right-wrapper'>";
          scope.htmlstring = scope.htmlstring + "<div class='left-inner'>{{obj.lastname}}</div><div class='left-inner'>{{obj.department}}</div></div>";
          scope.htmlstring = scope.htmlstring + "<div class='top-right-wrapper'><div class='left-inner'>{{obj.department}}</div>";
          scope.htmlstring = scope.htmlstring + " <div class='left-inner'>{{obj.lastname}}</div><div>{{obj.testdata}}</div>    ";
          scope.htmlstring = scope.htmlstring + "<div ng-repeat='x in obj.testdata'>{{x.col1}}{{x.col2}}</div>   </div></div></div>";       
        }
      }
    }
  ])
  .directive('bindHtmlCompile', ['$compile',...