Q:

Angularjs control flow from directive to controller back to directive

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?' 
Problem:
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. 
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. 
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:
angular.element(e).scope().getContent();

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:
http://plnkr.co/edit/53bebb?p=preview
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:
  var newScope = $scope.$new();
  var e = $compile('<div popup></div>')(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();
  }

However that did not quite work as newScope is not really the scope for the controller that has the 'getContent()' function. 
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. 
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. 
Any and all help and criticism (with resize issue and angular use) is welcome and appreciated. 
Thanks in advance. 

A:

In my solution I'm allowing a service to have access to the markers that are on the map and another service which communicates to the backend for content. 
The service that accesses the marker allows me to add a directive for the popup and bind it to a marker.  The popup directive could have additional information that is filled out by the retrieved data. 
The content getting service works by using a promise, which is resolved with the data when the backend returns.  I just used a $timeout, but you will be using $http. 
me. GetData = function() {
    var def = $q.defer();
    $timeout(function() {
        def.resolve('<span> wooo!  </span>');
    }, 2000);
    return def.promise;
};

The popup service binds to the marker (with some default elements if needed) and waits for the content. 
map_service.marker.bindPopup(pop);
map_service.marker.on('click', function() {
    content. GetData().then(function(data) {
        pop.setContent(data);
    });
});

Now I'm just returning html from the timeout, but likely you will either use the promise inside the content or bind the return data to the scope to update the html. 
And here we go, now when the data is returned the popup gets the new data.  Additionally you may want to keep your markers in the controller, so even the ugliness with the map_service is avoided. 
Here is the fiddle
Let me know if you have questions

