title: Angularjs control flow from directive to controller back to directive
body: <p>I am trying to work around an issue using angularjs and leaflet together.  But this general question has plagued me for a while so the workaround is a good lead into 'am I even doing this the right way from an angular perspective?'</p>
  
  <p>Problem:</p>
  
  <p>I am using a leaflet map and I would like to use its popups to display additional data about my points on the map.  I intend to display a lot of points on the map.  What is a lot?  Enough that when I query the server for points I only grab the id (used to query later for more data) and the geometry (so I can plot the point).  On 'click' of the point I would like to reach out to the server to get all the data that is associated with that particular point and display it in the popup.</p>
  
  <p>I have an angular directive that controls all things in the DOM that are related to leaflet (leaflet directive).  That directive is what listens for things like 'click' on a point.  When this happens my directive goes back to a controller, that controller then asks the server for the data about the point and fills in a scope variable such that the HTML template can 'fill in' the data.</p>
  
  <p>A couple of questions here:
  1. Should directives call back to controllers to get data that the directive then listens for?
  2. My call to the directive seems like a hack as I have to get the scope if a 'just compiled' element in what feels like a hack:</p>
  
  <pre><code>angular.element(e).scope().getContent();
  </code></pre>
  
  <p>On to the problem.  Leaflet is not picking up that the HTML has been updated just after the popup has been rendered.  This causes a width issue as popup is not wide enough to fit the text.  Here is a plunk:</p>
  
  <p><a href="http://plnkr.co/edit/53bebb?p=preview" rel="nofollow">http://plnkr.co/edit/53bebb?p=preview</a></p>
  
  <p>I have tried a few things to solve this to no avail.  The best I could come up with is to do something like this:</p>
  
  <pre><code>  var newScope = $scope.$new();
    var e = $compile('&lt;div popup&gt;&lt;/div&gt;')(newScope);
  
    // don't bind yet, size problem
    //marker.bindPopup(e[0]);
  
    // listen for the click, then get data from server to fill in template
    marker.on('click', function() {
      angular.element(e).scope().getContent();
    });
  
    newScope.$watch("content", function(content) {
      if (!content) return;
      // now bind and open the popup as we should already have the content
      marker.bindPopup(e[0]).openPopup();
    }
  </code></pre>
  
  <p>However that did not quite work as newScope is not really the scope for the controller that has the 'getContent()' function.</p>
  
  <p>Lastly even if this did work its probably not a great solution because lets just say my server is slow and takes 3 seconds to return data.  That means I would not even show the popup for 3 seconds after the click which is a horrible user experience.</p>
  
  <p>The only thing that I am left with is trying to resize the leaflet popup on my own, not even sure where to start or if that is a good idea.</p>
  
  <p>Any and all help and criticism (with resize issue and angular use) is welcome and appreciated.</p>
  
  <p>Thanks in advance.</p>