AngularJS Data Binding issue on Internet Explorer using Curly Braces

Question

AngularJS Data Binding issue on Internet Explorer using Curly Braces

What am I doing wrong here? I've read through the IE Compatibility Guide but that doesn't mention data binding using {{}} tags. This works fine on other browsers but fails in IE (including IE9).

http://jsfiddle.net/yMgQ8/1/

HTML:

<html ng-app class="ng-app">

    <head></head>

    <body>
        <div ng-controller="Controller">
            <p>{{test}}</p>
        </div>
    </body>

</html>

JavaScript:

function Controller($scope) {
    $scope.test = "Hello world";
}

I've tried adding the steps mentioned in the compatibility guide but that doesn't seem to solve it, unless I'm missing something obvious!

It should output "Hello world", but on IE it outputs {{test}}.

Many Thanks.

javascript
html
internet-explorer
angularjs

Answer 1

The problem appears not to be angular but jsfiddle

http://plunker.no.de/BL97Av/ this works in IE9

Also, IE7 or IE8 Compatibility you are on your own.

Answer 2

For future reference; adding an id attribute to the html element solved my problem. In your case this would mean changing the code to:

<html ng-app id="ng-app" class="ng-app">