title: Why does $compile create multiple elements in ng-repeat?
body: <p>Why does $compile create multiple elements in ng-repeat?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;li ng-repeat="action in actions" set-on-click function="{{action.function}}"&gt;&lt;i class="{{action.class}}" aria-hidden="true"&gt;&lt;/i&gt;{{action.text}}&lt;/li&gt;
  </code></pre>
  
  <p>Directive:</p>
  
  <pre><code>directive('setOnClick', ['$compile', function ($compile) {
      return {
          restrict: "A",
          link: function(scope, elm, attrs, ctrl)
          {
            console.log(attrs.function);  
            elm.attr("ng-click", attrs.function);
            elm.removeAttr("set-on-click");
            $compile(elm)(scope);
          }
        };
  }]);
  </code></pre>
  
  <p>Im getting value for <code>$scope.actions</code> from the database which has 3 records. I had to use directive so as to bind <code>ng-click</code> to a function which im fetching from the database. Instead of getting 3 li items I'm getting 9. Each of the li is repeating itself thrice. Can someone please explain why? Is there a way to stop this duplicacy?</p>