AngularJS and Internet explorer not rendering my AngularJS

Question

I'm putting together a simple calculator web app and thought I would give AngularJS a go. Everything is working fine in Chrome, Firefox etc.

However we still support IE9 unfortunately and the Angular JS code I have written is not working in IE9 I just get {{ Variable }}

Any ideas?

HTML code:

<head>
    <title></title>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.29/angular.min.js"></script>
    <script src="PumpCalculator.js"></script>
</head>

<body>
    <div ng-app="MotorApp" ng-controller="MotorController">
        <h2>Pump Calculations</h2>
        <p>
            Outside Root Diameter:
            <input ng-model="OutsideRoot">(mm)</p>
        <p>
            Inner root diameter:
            <input ng-model="InnerRoot">(mm)</p>
        <p>
            Height:
            <input ng-model="Height">(mm)</p>
        <p>Displacement: {{ DisplacementCC ()}}<b>cc</b>
            <br/>{{ DisplacementCU() }} <b>cu in</b>
        </p>
        <br />
        <h2>Volume</h2>
        <p>cc:
            <input ng-model="VolumeCC">
        </p>
        <p>Pump rpm:
            <input ng-model="VolumePumpRPM">
        </p>
        <p>{{ PumpLitres() }} <b>Litres/Min</b>
            <br /> {{ GPM() }} <b>GPM</b>
        </p>
        <h2>Horse Power</h2>
        <p>Flow: <input ng-model="FlowLitresMin"> (Litres/min)  <input ng-model="FlowGPM"> (GPM)</p>
        <p>Force In Pressure: <input ng-model="ForceBar"> (Bar) <input ng-model="ForcePSI"> (psi)</p>
        <p>{{ ForceKW() }} <b>KW</b> <br /> {{ ForceHP() }} <b>HP</b></p>
        <br />
        <h2>Power to drive a pump</h2>
        <b>Known factors</b>
        <p>Pressure = <input ng-model="PowerPressure"> <b>Bar</b></p>
        <p>Pump displacement = <input ng-model="PowerPump"> <b>cm³/rev</b></p>
        <p>Input speed = <input ng-model="PowerInput"> <b>rpm</b></p>
        <p>Pump Efficiency = <input ng-model="PowerEff"> <b>%</b></p>
        <br />
        <b>Results</b>
        <p>Power = {{ PowerResult() }} <b>Kw</b></p>
        <p>Flow = {{ FlowResult() }} <b>L/min</b></p>
    </div>
</body>

</html>

AngularJS code:

angular.module('MotorApp', []).controller('MotorController', function($scope) {
    //Pump Calculations
    $scope.OutsideRoot = 0;
    $scope.InnerRoot = 0;
    $scope.Height = 0;
    $scope.DisplacementCC = function() {
        var outside = $scope.OutsideRoot;
        var inner = $scope.InnerRoot;
        var height = $scope.Height;
        var a = ((((outside * outside * 0.7854) - (inner * inner * 0.7854)) * height) / 1000).toFixed(4)
        return a;
    }
    $scope.DisplacementCU = function() {
        var outside = $scope.OutsideRoot;
        var inner = $scope.InnerRoot;
        var height = $scope.Height;
        var b = ($scope.DisplacementCC() * 0.06102).toFixed(4);
        return b
    }
    //Volume Calculations
    $scope.VolumeCC = 100;
    $scope.VolumePumpRPM = 10;
    $scope.PumpLitres = function () {
        var vol = $scope.VolumeCC;
        var rpm = $scope.VolumePumpRPM;
        return ((vol * rpm)/1000).toFixed(4);
    }
    $scope.GPM = function () {
        var vol = $scope.VolumeCC;
        var rpm = $scope.VolumePumpRPM;
        return ($scope.PumpLitres() / 3.7854).toFixed(4);
    }
    //Horse Power Calculations
    $scope.FlowLitresMin = 0;
    $scope.FlowGPM = 0;
    $scope.ForceBar = 0;
    $scope.ForcePSI = 0;
    $scope.ForceKW = function () {
        var flowL = $scope.FlowLitresMin;
        var forceB = $scope.ForceBar;
        return ((flowL * forceB)/600).toFixed(4);
    }
    $scope.ForceHP = function () {
        var flowG = $scope.FlowGPM;
        var forceP = $scope.ForcePSI;
        return ((flowG*forceP)/1714).toFixed(4);
    }
    //Power To drive a pump
    $scope.PowerPressure = 0.00;
    $scope.PowerPump = 0.00;
    $scope.PowerInput = 0.00;
    $scope.PowerEff = 92.00;
    $scope.PowerResult = function() {
       return (($scope.PowerPressure*($scope.PowerPump*$scope.PowerInput))/(600000*($scope.PowerEff/100))).toFixed(2);
    }
    $scope.FlowResult = function() {
        return (($scope.PowerInput/1000)*($scope.PowerPump*($scope.PowerEff/100))).toFixed(2);
    }
});

You could have some javascript problem. So IE can not initialize the app — Partha Sarathi Ghosh
– Partha Sarathi Ghosh, Commented Jul 12, 2016 at 6:05
Unfortunately @Adrian I tried adding the 'data' before the ng-** however it still just displays {{ variable }} — Adam91Holt
– Adam91Holt, Commented Jul 12, 2016 at 6:43

Adam91Holt · Accepted Answer · 2016-07-12 08:25:01Z

0

The way I solved this was to add...

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

As the 1st line in the tag

answered Jul 12, 2016 at 8:25

Adam91Holt

1,0781 gold badge14 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS and Internet explorer not rendering my AngularJS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related