I have an app where I need to create html and add it to an object array. This html should then be outputted into page. Simple enough. However, I also need to make the html responsive to user actions (click) in which case angular requires me to use $compile to create an angularized template.

See the [Plunkr](http://plnkr.co/edit/bMohTeBwCk5NW3leXqDJ?p=preview). In this example, what should happen is that when you click on one of the buttons, a popup is generated with the html code embedded in the object, which you can see in the JSON output.

As soon as I do this, I get the error Converting circular structure to JSON. If I don't, the ng-click="Go()" is not called.

SCRIPT

```
        var template = "<ul class='unstyled'>" +
                "<li ng-click='go()' style='background-color:lightcyan;'><ul class='inline'><li>1...</li><li>1...</li></ul></li>" +
                "<li ng-click='go()'><ul class='inline'><li>1...</li><li>1...</li></ul></li>" +
                "<li ng-click='go()' style='background-color:lightcyan;'><ul class='inline'><li>1...</li><li>1...</li></ul></li>" +
                "</ul>";

       // template = $compile(template)($scope);

        $scope.data = [
            {"id": 1, "html": template},
            {"id": 2, "html": template}
        ];

        $scope.go = function () {
            alert('It works');
        };

        $scope.openPopin = function (html) {
            var e = window.event;
            var popin = document.getElementById('popin');
            var innerdiv = document.getElementById('innerdiv').innerHTML=html;
            popin.style.top= e.pageY - 20+"px";
            popin.style.left = e.pageX - 20+"px";
            popin.style.marginLeft = -500+"px";
            popin.style.marginTop = -100+"px";
        };

        $scope.closePopin = function () {
            var popin = document.getElementById('popin');
            popin.style.top = -500+"px";
            popin.style.left = -500+"px";
        };

```

HTML

```
  <div class="popin grey-border" id="popin">
      <button class="close" ng-click="closePopin()">&times;</button>
      <div id="innerdiv"></div>
  </div>

  <pre>{{ data |json }} </pre>

  <br/>
  <table style="float: right;">
      <tr ng-repeat="d in data" id="{{$index}}">
          <td>{{ d.id }} -
              <button class="btn btn-mini btn-info" ng-click="openPopin(d.html)"><i class="icon-info-sign"></i></button>
          </td>
      </tr>
  </table>

```