Including Adsense ads inside an ng-repeat loop causes errors

Question

I'm including Google Adsense ads at certain points inside an Angularjs ng-repeat loop like so:

<div ng-repeat="item in items"  >

 <div data-my-ad-sense ng-if="$index == 3">
  //inject an ad inside the third item


   <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
   <!-- ad 2 -->
     <ins class="adsbygoogle"
     style="display:inline-block;width:290px;height:290px"
     data-ad-client="ca-pub-000000"
     data-ad-slot="00000"></ins>
   <script>
   (adsbygoogle = window.adsbygoogle || []).push({});
   </script>


</div>
</div>

And it works fine except that it gives me the error:

Uncaught Error: adsbygoogle.push(): All ins elements in the DOM with class=adsbygoogle already have ads in them

The ads show up where they're supposed to but I'm a little worried Google is going to think I'm using more ads than I'm supposed to. I've tried loading them in partials, but that didn't work either.

Does anyone know how to get rid of that error?

Answer 1

Use below directive

var adSenseTpl = '<ins class="ad-div adsbygoogle responsive" style="display:inline-block;width:468px;height:60px" data-ad-client="ca-pub-xxxxx" data-ad-slot="xxxxx"></ins></ins>';
    angular.module('reviewmattersApp')
        .directive('googleAdsense', function($window, $compile) {
        return {
            restrict: 'A',
            transclude: true,
            template: adSenseTpl,
            replace: false,
            link: function postLink(scope, element, iAttrs) {
                    element.html("");
                    element.append(angular.element($compile(adSenseTpl)(scope)));
                    if (!$window.adsbygoogle) {
                        $window.adsbygoogle = [];
                    }
                    $window.adsbygoogle.push({});
            }
        };
    });

In html side

<div  google-adsense>
</div>