title: Nested directive and ng-repeat exception TypeError: Cannot read property 'insertBefore' of null
body: <p>I am learning angularjs by developing map directives. The most outer directive is myMap, then myCircle, myMarker, etc.... are the child directives. At this time, I have only the myMap and myCirle directives.
  The map and circles works fine if I dont use the ng-repeat. As soon as I use ng-repeat, the angularjs throws exceptions</p>
  
  <p><strong>TypeError: Cannot read property 'insertBefore' of null at <a href="https://code.angularjs.org/1.2.21/angular.js:3012:13" rel="nofollow">https://code.angularjs.org/1.2.21/angular.js:3012:13</a>...</strong>
  as soon as I start draw the map. I spend many hours but still dont know how to fix it. Any help would be appreciated.</p>
  
  <p>Here is my plunker: <a href="http://plnkr.co/edit/LI7lh28OAhh59HeuL7O1?p=preview" rel="nofollow">http://plnkr.co/edit/LI7lh28OAhh59HeuL7O1?p=preview</a></p>
  
  <pre><code> app.directive('myMap', function () {
          return {
            restrict: 'E',
            replace: true,
            transclude: true,
            template: "&lt;div ng-transclude id='mapCanvas' &gt;&lt;/div&gt;",
            scope: {
                center: '=',
                zoom: '='
            },
            controller: function ($scope) {
              console.log('map directive: controller...')
              this.drawCircle = function (data) {
  
                 var circle = new google.maps.Circle({
                              map: $scope.map,
                              center: new google.maps.LatLng(data.center.latitude, data.center.longitude),
                              radius: data.radius,
                              strokeColor: data.strokeColor,
                              strokeOpacity: data.strokeOpacity,
                              strokeWeight: data.strokeWeight,
                              fillColor: data.fillColor,
                              fillOpacity: data.fillOpacity
                          });
  
                return circle;
  
              };
            },
            link: function (scope, element, attrs) {
                var mapOptions = {
                          center: new google.maps.LatLng(scope.center.latitude, scope.center.longitude),
                          zoom: scope.zoom
                      };
                // comment this line out will make the directives work without problem.
                scope.map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);
  
                console.log("Map directive:Link: initialize the map ..." + JSON.stringify(scope.center));
            }
          }
      });
  
      app.directive('myCircle', function ($timeout) {
          return {
            restrict: 'E',
            replace: true,
            scope: {},
            require:'^myMap',
            link: function (scope, element, attrs, ctrl) {
                console.log("circle directive:Link..." );
  
             var data = {
                          center:{latitude: attrs.lat, longitude:attrs.lng},
                          radius: parseFloat(attrs.radius),
                          strokeColor: attrs.strokeColor,
                          strokeOpacity: attrs.strokeOpacity,
                          strokeWeight: attrs.strokeWeight,
                          fillColor: attrs.fillColor,
                          fillOpacity: attrs.fillOpacity
                      };
  
              $timeout( function(){
                console.debug('callling the map.drawCircle...')
                ctrl.drawCircle(data)
              }, 1000);
            }
          }
      });
  </code></pre>