AngularJS custom directives not working when using ng-include “Object #<Scope> has no method”

So I decided after much debate, to split my webpage into two parts, one for ie7 and another for ie8+. I have many

<!-- if lte ie7---> 

scattered around, and I just want to separate the html as much as possible. Sure it's heavier maintenance, but whatev.

So as I moved my html content from the main.html to submain.html, I noticed one of my custom directives wasn't working.

Note: All my javascript gets loaded AFTER I load the html content.

I have a directive called ng-map, where if this attribute appears on any div with an ID, it'd call mapquest to fill in the div with an interactive map. Currently this works.

However, if I move the directive:

<div ng-map id="map"></div>

out of main.html and place it into submain.html and add this in my main.html:

<div ng-include="'view/submain.html'">

it doesn't work, even though my submain.html loads properly.

It gives me the error: "Error: Object # has no method 'initMap'"

This is what my directive looks like:

mapapp.app.directive('ngMap', ['logger', '$http', function (logger, $http) {
    var directiveDefinitionObject = {
        restrict: 'A',
        controller: function link($scope, $element) {
            $scope.shouldMapLoadOnPageLoad = true;

            $scope.loadCodeAndMap =
                function () {
                    var key = {...};
                    var script = document.createElement('script');
                    script.type = 'text/javascript';
                    script.src = "http://www.mapquestapi.com/sdk/js/v7.0.s/mqa.toolkit.js?key=" + key;
                    document.body.appendChild(script);
                };
            $scope.loadCodeAndMap();
            $scope.initMap = function () {
               ...
            }
        }
    };
    return (directiveDefinitionObject);
}]);

Any help in understanding what is happening here is appreciated.