Detect when an <ng-include src="..."> loads

Question

I'm using an <ng-include> inside of a modal to load different contents conditionally based on some options.

The contents are selected when the modal is launched in one mode (heh) or another, or when the user changes a drop down.

In any of these cases, a section in my template like this loads in the right modal contents:

<!-- Load in the correct modal contents -->
<ng-include src="'modals/contents-'+ form.type +'.html'"></ng-include>

It then loads modals/contents-addressForm.html or whatever the case may be.

The trick is, the different forms are different sizes. When they load, the modal needs to reposition itself.

I have tried $watch on the form.type variable. This detects both changes and initial value on modal launch, but the reposition happens too soon because the ng-include hasn't yet loaded in content. I have tried a defer but this isn't always long enough. I could try a timeout of arbitrary length but this seems... arbitrary.

Any way to know when any ng-include loads? When the next ng-include loads?

Answer 1

According to the docs, you should be able to listen to a scope event called $includeContentLoaded to tell this.

$scope.$on('$includeContentLoaded', function () {
    // it has loaded!
});