title: Popups not working properly with circle marker
body: <p>I'm facing an issue with the circle marker in ui leaflet plugin. When ever a some one clicks on a circle im getting the popup but if I click outside the circle in the map and then try clicking circle again the popup is not coming up.</p>
  
  <p>Can you please suggest what might be the problem? and is there any workaround for this?</p>
  
  <p>Steps to reproduce</p>
  
  <ol>
  <li>In map click one circle marker </li>
  <li>Move the circle marker out of scope of map </li>
  <li>Then try clicking any other marker the pop up will not appear </li>
  <li>If I clicked outside the circle and clicked circle again the pop up appears again </li>
  </ol>
  
  <p>Below is the snippet of the code if you need full code please visit this github link</p>
  
  <p><a href="https://github.com/Umamaheswaran1990/learningleaflet" rel="nofollow noreferrer">https://github.com/Umamaheswaran1990/learningleaflet</a></p>
  
  <p><a href="https://i.stack.imgur.com/EXw6a.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EXw6a.gif" alt="enter image description here"></a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="demoapp"&gt;
  &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;script src="../bower_components/angular/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="../bower_components/leaflet/dist/leaflet.js"&gt;&lt;/script&gt;
      &lt;script src="../bower_components/angular-simple-logger/dist/angular-simple-logger.js"&gt;&lt;/script&gt;
      &lt;script src="../bower_components/ui-leaflet/dist/ui-leaflet.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" /&gt;
      &lt;script src="app.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-controller="LayersSimpleController as vm"&gt;
      &lt;leaflet center="center" tiles="tiles" paths="paths" width="50%" height="480px"&gt;&lt;/leaflet&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var app = angular.module("demoapp", ['ui-leaflet']);
  app.controller("LayersSimpleController", ["$scope", function ($scope) {
      var vm = this;
  
      $scope.$on('leafletDirectiveMap.map.load', function (event, data) {
          var map = data.leafletObject;
          map.attributionControl.setPrefix(false);
      });
  
      $scope.$on('leafletDirectiveMap.moveend', function (event, data) {
          activate();
      });
  
      var map = [
          { "lat": 30.7559, "lon": -96.489 },
          { "lat": 41.8887, "lon": -111.769 }];
  
      angular.extend($scope, {
          center: {
              lat: 39.774769,
              lng: -98.789062,
              zoom: 4,
              minZoom: 4,
              zoomControl: true,
          },
          events: {},
          tiles: {
              url: 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
              options: {
                  subdomains: ['otile1', 'otile2', 'otile3', 'otile4']
              },
              layers: {},
              defaults: {
  
              }
          }
      });
  
      activate();
  
      function activate() {
          $scope.paths = {};
          angular.forEach(map, function (value, key) {
              if (value.lat !== null &amp;&amp; value.lon !== null) {
                  $scope.paths['circle' + key] = {
                      type: 'circleMarker',
                      className: 'testClass',
                      fillColor: 'DarkSlateGray',
                      color: '#000000',
                      weight: 0,
                      opacity: 1,
                      message: 'This is a test marker',
                      fillOpacity: 0.8,
                      stroke: false,
                      clickable: true,
                      latlngs: [parseFloat(value.lat), parseFloat(value.lon)],
                      radius: 20
                  };
              }
          });
      }
  }]);
  </code></pre>