Angular Directive won't work at all in IE

Question

This is my first foray into angularjs, I've successfully built a web app using google charts and angular which runs in Firefox and in Chrome. I was hoping to finish this project today, I'd not tested it in IE as I went, lo and behold it's completely broken in IE.

The link I've used to help me with the angular side of things is this one;

http://jrrera.github.io/angularjs/2014/04/05/a-better-way-to-integrate-angularjs-and-google-charts/

When I tried the code in IE, the DOM element where the chart is supposed to go doesn't get populated at all, my conclusion is that the directive is not activating. The two pieces of key code here are...

the directive;

app.directive("googleChart",function(){  
    return{
        restrict : "A",
        link: function($scope, $elem, $attr){
            var model;

            // Function to run when the trigger is activated
            var initChart = function() {

                // Run $eval on the $scope model passed 
                // as an HTML attribute
                model = $scope.$eval($attr.ngModel);

                // If the model is defined on the scope,
                // grab the dataTable that was set up
                // during the Google Loader callback
                // function, and draw the chart
                if (model) {
                    var dt = model.dataTable,
                        options = {},
                        chartType = $attr.googleChart;

                    if (model.title) {
                        options.title = model.title;
                    }

                    var googleChart = new google.visualization[chartType]($elem[0]);
                    googleChart.draw(dt,options)
                }
            };

            // Watch the scope value placed on the trigger attribute
            // if it ever flips to true, activate the chart
            $scope.$watch($attr.trigger, function(val){
                if (val === true) {
                    initChart(); 
                }
            });

        }
    }
});

and the div to be populated in index.htm;

  <div google-chart="ColumnChart" ng-model="dataModel.visual" trigger="activateChart"></div>

Although my version of this code from the above link is more advanced, at it's core it's using this exact method of instantiation. This happens on all versions of Internet Explorer, including Edge and 11. Being a relatively new learner of AngularJs, obviously I'm in the dark on what to do next. Could anyone offer me some advice? Many thanks.

Answer 1

to clarify

var loadGoogle = ChartService.loadGoogleVisualization();

    // If the Google Loader request was made with no errors, 
    // register a callback, and construct the chart data
    // model within the callback function
    if (loadGoogle) {

        google.setOnLoadCallback(function() {

            $scope.dataModel.visual.dataTable = new google.visualization.DataTable();

            // Set up the dataTable and columns
            var dataTable = $scope.dataModel.visual.dataTable;
            dataTable.addColumn("string","Date")
            dataTable.addColumn("number","Minutes")

            // Populate row data
            dataTable.addRow(["3/1/14",5]);
            dataTable.addRow(["3/2/14",13]);

            // Update the model to activate the chart on the DOM
            // Note the use of $scope.$apply since we're in the 
            // Google Loader callback.
            $scope.$apply(function(){
                $scope.activateChart = true;    
            });
        });  
    }

became;

google.load("visualization", "1", {packages:["corechart"], callback: drawChart});       


    $scope.dataModel.visual.dataTable = new google.visualization.DataTable();
    // Set up the dataTable and columns
    var dataTable = $scope.dataModel.visual.dataTable;
    dataTable.addColumn("string","Date")
    dataTable.addColumn("number","Minutes")

    // Populate row data
    dataTable.addRow(["3/1/14",5]);
    dataTable.addRow(["3/2/14",13]);

    // Update the model to activate the chart on the DOM
    // Note the use of $scope.$apply since we're in the 
    // Google Loader callback.
    $scope.$apply(function(){
        $scope.activateChart = true;    
    });