Collection-repeat creates multiple instances of html elements created via directive

I have written a directive to create html elements as:

app.directive('goToActionButton', function($compile) {
    return {
        restrict: 'E',
        scope: {
          buttonText: '@text',
          'goToAction': '&onClick'
        },
        template: '<ion-item ng-click="goToAction();" class="border-radius-1x item-icon-right margin-2x margin-top-2x padding-vert-7px navigate-action-button">'+
            '<span>{{buttonText}}</span>'+
            '<i class="icon ion-chevron-right list-forward-icon"></i>'+
        '</ion-item>',
        compile: function CompilingFunction($templateElement, $templateAttributes) {
            var html = this.template;

            return function LinkingFunction($scope, $element, $attrs) {
                var e = $compile(html)($scope);
                $element.replaceWith(e);
            };
        }
    };
});

Now I have used this directive under collection repeat as:

<div collection-repeat="business in businesses" item-height="170px" item-render-buffer="10" class="business-item margin-bottom-2x">
<p class="star-rating-box margin-top-1x">
    <rating-circle value="business.RATING" ng-if="business.RATING > 0"></rating-circle>
    <span class="margin-left-1x font-small" ng-if="business.REVIEW_COUNT > 0">{{business.REVIEW_COUNT}} Reviews</span>                
                        </p> 
</div>

now my problem is that whenever i traverse through the collection-repeat list my<rating-circle> element gets created once gain alongside the one I am already having…if I traverse the list three time then three <rating-circle> element will be created.

please help