title: Angular JS works in Chrome, but not IE 11
body: <p>I'm picking up Angular JS at:
  <a href="http://www.sitepoint.com/practical-guide-angularjs-directives/">http://www.sitepoint.com/practical-guide-angularjs-directives/</a>,
  and I find that the following codes work in Chrome, but not IE 11.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="myapp"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;No Title&lt;/title&gt;
      &lt;script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.7/angular.js" data-semver="1.2.7"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;input type="text" ng-model="color" placeholder="Enter a color..." /&gt;
      &lt;div data-hello-world /&gt;
      &lt;script&gt;
          var app = angular.module('myapp', []);
          app.directive('helloWorld', function () {
              return {
                  restrict: 'AE',
                  replace: true,
                  template: '&lt;p style="background-color:{{color}}"&gt;Hello World!!&lt;/p&gt;',
                  link: function (scope, elem, attrs) {
                      elem.bind('click', function () {
                          elem.css('background-color', 'white');
                          scope.$apply(function () { scope.color = "white"; });
                      });
                      elem.bind('mouseover', function () { elem.css('cursor', 'pointer'); });
                  }
              }
          });
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Specifically, the mouseover and click events work fine. However, the paragraph's background color doesn't in IE (the color never changes). It's ok in Chrome. Thanks!</p>