AngularJS: ng-if plus ng-include throws TypeError: Cannot call method 'insertBefore' of null

I'm writing an app using Ionic Framework (version v1.0.0-beta.11), but I believe this question is rather related with the underlying AngularJS (version v1.2.17).

I have a problem when using ng-if and ng-include together in the same element. When the condition of the ng-if changes in the model, I get the following error (tested both in Chrome and Android):

TypeError: Cannot call method 'insertBefore' of null
    at http://localhost:8100/lib/ionic/js/ionic.bundle.js:10843:14
    at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:8187:18)
    at forEach.after (http://localhost:8100/lib/ionic/js/ionic.bundle.js:10842:5)
    at Object.JQLite.(anonymous function) [as after] (http://localhost:8100/lib/ionic/js/ionic.bundle.js:10913:17)
    at Object.enter (http://localhost:8100/lib/ionic/js/ionic.bundle.js:12015:17)
    at Object.enter (http://localhost:8100/lib/ionic/js/ionic.bundle.js:30107:21)
    at http://localhost:8100/lib/ionic/js/ionic.bundle.js:27441:26
    at publicLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:13779:29)
    at boundTranscludeFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:13894:21)
    at controllersBoundTransclude (http://localhost:8100/lib/ionic/js/ionic.bundle.js:14492:18)


I've isolated the issue in a simple project based on the Ionic starter project (ionic start [PATH] tabs). Here's the code: http://plnkr.co/edit/CczR5NgFLqR143jQJ08C?p=preview

I dug into the error and found that the function that is throwing the error is after: function(element, newElement) {....
Printing out the arguments passed the function, element is an [object Comment] with contents <!-- ngInclude: --> and newElement is an [[object HTMLDivElement]].

I read here that both directives ng-if and ng-include can be combined since Angular 1.2.2.

Has anyone experienced this issue?. Is there any known fix (other than moving the ng-if to a parent element)?.

Thanks in advance,
  Rafa.

Both ng-if and ng-include are queued up to execute, and ng-if has a higher priority so it runs first. If the expression is false, then ng-if removes the element, but doesn't cancel the ng-include from running. Since the element is removed, ng-include is unable to inject the loaded content into the element and you get this error.

You could consider having an expression in ng-include and remove the ng-if. If the expression returns an empty string, ng-include will not try to load anything.

Forked your plunkr and have the content load after 2 seconds: http://plnkr.co/edit/oTnJ0bTlMBD7yrUmPloq?p=preview

Markup

<ng-include src="source"></ng-include>

Controller

// In the controller, check
$timeout(function () {
  $scope.source = 'templates/Nocontent.html';
}, 2000);