Вложенная директива AngularJS не вызывается

  <my-google-map center="{latitude: 34.9876, longitude:-93.98765}" zoom="7" >
      <my-circle center="{latitude: 34.2345, longitude:-94.88765}"
                   radius="6000"
                   strokecolor="#FF0000"
                   strokeOpacity="0.8"
                   strokeWeight="2"
                   fillColor="#FF0000"
                   fillOpacity="0.35">
      </my-circle>
  </my-google-map>

app.directive('myGoogleMap', function () {
      return {
                restrict: 'E',
                replace: true,
                transclude: true,
                template: "<div ng-transclude id='mapCanvas' ></div>",
                scope: {
                    center: '=',
                    zoom: '='
                },
                controller: function() {
                   // does nothing for now...
                },
                link: function (scope, element, attrs) {
                    console.log("Map directive: Link function ...");
                    // Will load the map right here 
                    // I also need to pass the reference of map object to circle directive..
                    // var map = new google.maps.Map(document.getElementById("mapCanvas"),mapOptions);               
               }
            }
      });


  app.directive('myCircle', function () {
        return {
            restrict: 'E',
            replace: true,
            require: '^myGoogleMap',
            scope: {
                center: '=',
                strokeColor: '=',
                strokeWidth: '='
            },
            link: function (scope, element, attrs, ctrl) {
                // need to have referece to map instance of myGoogleMap
                // to draw circle right here...
                console.log("Circle directive: Link function ...")
            }
        }
  });