Error: [$compile:multidir] Multiple directives [ngSwitchWhen, ngInclude] asking for transclusion - angularjs

Question

I need a solution for preloading data with ng-include like in this blog post preloading-data-before-executing-nginclude-in-angularjs described.
It seems that this solution works prity well, but the author works with angular version 1.0.7.
Im using version 1.2.1 and have also tried version 1.7.9 and the result is the error message.
Error: [$compile:multidir] Multiple directives [ngSwitchWhen, ngInclude] asking for transclusion on: <div ng-switch-when="one" bn-preload="oneData" bn-include-log="" ng-include=" 'one.htm' ">
How can i fix it with the newer version, or is there a better solution?
In my project, i receive data by reqest and the ng-include should be waiting till the request ends and the data to show are available.
Edit:
My HTML code is like this
<div ng-init="validityList = validities.UploadList;" bn-preload="validities" ng-include="'/validity/list'"></div>
And the error in my project is
Multiple directives [ngInclude, bnPreload] asking for transclusion on
The solution Lemmy suggestet is not working for me, because bn-preload and ng-include need to be on the same element.
Edit2:
I don't know what you mean by "bn-preload html".
This is what i have done so far in angular.
const BaseApp = angular.module('BaseApp')
.factory('preloader', function ($q, $interval) {
this.load = function (target) {
const deferred = $q.defer();
const loadData = $interval(function () {
if ($q[target].length > 0) {
deferred.resolve($q[target]);
$interval.cancel(loadData);
}
}, 100);
return (deferred.promise);
}
})
.directive('bnPreload', function (preloader) {
function compile(templateElement, templateAttribute, transclude) {
function link($scope, element, attributes) {
let injectedElement = null;
let isDestroyed = false;
preloader.load(attributes.bnPreload).then(
function (preloadedData) {
if (isDestroyed) {
return;
}
$scope.setData(preloadedData);
transclude($scope, function (copy) {
element.after(injectedElement = copy);
});
}
);
$scope.$on(
'$destroy',
function () {
isDestroyed = true;
$(injectedElement).remove();
}
);
}
return (link);
}
return ({
compile: compile,
priority: 250,
terminal: true,
transclude: 'element'
});
})
.controller('validity', function ($scope, $http) {
$http({
method: 'POST',
url: '/validity/getall'
})
.then(function (response) {
$scope.validities = response.data;
});
});
Most of the code is equal to the example from the link above.