title: Angular-leaflet-directive Custom HTML popup
body: <p>I'm attempting to create a custom popup while using the angular-leaflet-directive. I'm opening the popup from the leaflet.draw on:create event.  Here:</p>
  
  <pre><code>map.on('draw:created', function(e) {
  
      layer = e.layer;
      drawnItems.addLayer(layer);
      var newComment = "Enter Comment";
      var newID = "ID";
      var newGeoJsonFeat = layer.toGeoJSON();
      newGeoJsonFeat.properties = {"comment":newComment, "id":newID};
      console.log(newGeoJsonFeat);
  
      onEachFeature(newGeoJsonFeat,layer);
      layer.openPopup();
  });
  </code></pre>
  
  <p>Then I'm using @blackjid's logic as seen here:  <a href="https://github.com/tombatossals/angular-leaflet-directive/issues/238" rel="nofollow">https://github.com/tombatossals/angular-leaflet-directive/issues/238</a>  to bind the custom popup</p>
  
  <pre><code>function onEachFeature(feature, layer) {
      // Create get the view template
      var popupContent = '&lt;div ng-include="\'partials/popup_newfeat.html\'"&gt;&lt;/div&gt;';
      console.log("assigning popup");
  
      // Bind the popup
      // HACK: I have added the stream in the popup options
      layer.bindPopup(popupContent,{
        closeButton: false,
        maxHeight: 300,
        feature: feature
      });
  };
  
  $scope.$on('leafletDirectiveMap.popupopen', function(event, leafletEvent){
  
    // Create the popup view when is opened
    var feature = leafletEvent.leafletEvent.popup.options.feature;
  
    var newScope = $scope.$new();
    newScope.stream = feature;
  
    $compile(leafletEvent.leafletEvent.popup._contentNode)(newScope);
  });
  </code></pre>
  
  <p>Long story short, Everything works fine except the popup container isn't resizing properly to fit the new content.  The height seems right, but the width is off.  </p>
  
  <p>I tried using:</p>
  
  <pre><code>.leaflet-popup-content {
      width:auto !important;
  }
  </code></pre>
  
  <p>Which will probably suffice, but this causes the popup anchor to shift to the bottom left of the popup for some reason. AutoPan is also broken when clicking near the top of the map.  </p>
  
  <p>Does anyone know where and how I can get popup.update() to fire?  I believe thats what needs to happen, but I don't know where to implement it.  I've tried calling it after layer.openPopup() like so:</p>
  
  <pre><code>    onEachFeature(newGeoJsonFeat,layer);
      layer.openPopup();
      layer.getPopup().update();
  });
  </code></pre>
  
  <p>But that doesn't seem to do anything.  Any help is greatly appreciated!</p>