title: Angular JS does not render view in IE 8
body: <p>Internet explorer 8 seems to hate the Angular.js used in my contact form, and I am not sure how to debug. Using emulation mode in IE 11 shows that the view is not rendered, but the console doesn't seem to report any errors. Is there something obvious I have overlooked, or is there a better method of troubleshooting the problem?</p>
  
  <p>Here is the (relevant) rendered HTML:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;!--[if lt IE 7]&gt; &lt;html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en" dir="ltr"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 7]&gt; &lt;html class="no-js lt-ie9 lt-ie8" lang="en" dir="ltr"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 8]&gt; &lt;html class="no-js lt-ie9" lang="en" dir="ltr"&gt; &lt;![endif]--&gt;
  &lt;!--[if gt IE 8]&gt;&lt;!--&gt;
  &lt;html class="no-js" lang="en" dir="ltr" ng-app="contactApp"&gt;
  &lt;!--&lt;![endif]--&gt;
  
  &lt;head&gt;
      &lt;title&gt;Contact&lt;/title&gt;
  
      &lt;!-- Meta Data ================ --&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;meta name="description" content="Fill this in with your information" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt;
  
      &lt;link href="/bundles/themes/crisp/css?v=pK1cGyJZf_vIrdHwRAD8udDrwCLW4VlqszdBq6edIec1" rel="stylesheet"/&gt;
  
      &lt;script src="/bundles/jquery?v=aLsVjoQ4OTEtRxZ322JRn0RdnugNXJ-_IdXTAvkYpyU1"&gt;&lt;/script&gt;
  
      &lt;link href="/bundles/less?v=PejI2ZnuZepYh90ntnI8FhCApgGHAiohpYRpz8gcRRg1" rel="stylesheet"/&gt;
  
      &lt;script src="/bundles/modernizr?v=wBEWDufH_8Md-Pbioxomt90vm6tJN2Pyy9u9zHtWsPo1"&gt;&lt;/script&gt;
  
  
      &lt;!-- Icons ================ --&gt;
      &lt;!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --&gt;
      &lt;link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" /&gt;
      &lt;!-- For first- and second-generation iPad: --&gt;
      &lt;link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png" /&gt;
      &lt;!-- For iPhone with high-resolution Retina display: --&gt;
      &lt;link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png" /&gt;
      &lt;!-- For third-generation iPad with high-resolution Retina display: --&gt;
      &lt;link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png" /&gt;
      &lt;link rel="shortcut icon" href="favicon.ico" /&gt;
  
      &lt;link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,400italic,300italic,700,700italic" rel="stylesheet"&gt;
      &lt;link href="http://fonts.googleapis.com/css?family=Raleway:300,500,600,700" rel="stylesheet"&gt;
      &lt;link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  &lt;body class="index"&gt;    
  &lt;div class="container clearfix" id="main-content" ng-controller="ContactController"&gt;
      &lt;div class="animated bounceInLeft" ng-view&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://code.angularjs.org/1.2.14/angular-route.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/Content/JS/Controllers/ContactController.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      var contactApp = angular.module("contactApp", ['ngRoute']);
      contactApp.controller('ContactController', ContactController);
      contactApp.config(function ($routeProvider) {
          $routeProvider
              .when('/',
                  {
                      controller: 'ContactController',
                      templateUrl: '/Content/JS/Views/Forms/MessageForm.html'
                  })
              .when('/refer/',
                  {
                      controller: 'ContactController',
                      templateUrl: '/Content/JS/Views/Forms/ReferForm.html'
                  })
              .otherwise({ redirectTo: '/' });
      });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here is ContactController.js</p>
  
  <pre><code>function ContactController($scope, $location, $http) {
      $scope.isSelected = function (route) {
          return route === $location.path();
      }
  
      $scope.typeButtonSelected = function (value) {
          return $scope.message.referraltype === value;
      }
  
      $scope.master = {
              referraltype: 'Neuro'
          };
  
      $scope.update = function (message) {
          console.log("running");
          if ($scope.contactform.$valid) {
              $("#contactform").hide();
              $("#formSelectButtons").hide();
              $("#loadingMessage").show(1000);
              $http({
                  url: '/Contact',
                  method: 'POST',
                  data: { json: JSON.stringify(message) }
              }).success(function (data) {
                  $("#validationMessage").hide();
                  if (data.response == 200) {
                      $("#loadingMessage").fadeOut(500);
                      $("#successMessage").fadeIn(1000);
                      $scope.master = data;
                      console.log(data);
                  }
                  else {
                      $("#loadingMessage").fadeOut(500);
                      $("#contactform").fadeIn(1000);
                      $("#formSelectButtons").fadeIn(1000);
                      console.log(data);
                  }
              }).error(function (data) {
                  $scope.master = { response: 400 };
                  $("#loadingMessage").fadeOut(500);
                  $("#contactform").fadeIn(1000);
                  $("#formSelectButtons").fadeIn(1000);
                  console.log(data);
              });
          } else {
              $("#validationMessage").show();
          }
      };
  
      $scope.reset = function () {
          $scope.message = angular.copy($scope.master);
      }
  
      $scope.reset();
  }
  </code></pre>