title: Angularjs not working when using IE 9
body: <p>I have an angularjs app, where I am using ng-app on div, and not the html.</p>
  
  <p>The application works fine in IE>=10 and chrome,FF. </p>
  
  <p>In IE 9, none of the ng- code is executed, breakpoint doesn't enter my custom angular scripts, and html shows {{}}.</p>
  
  <p>It seems like angularjs is not getting bootstrapped.</p>
  
  <p>I tried manually bootstrapping using</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  
  $(document).ready(function () {
          angular.element(document).ready(function () {
                          angular.bootstrap(document.getElementById("HomeGrid"), ['ngGridApp']);</code></pre>
  </div>
  </div>
  </p>
  
  <p>Doing this doesn't show the {{}} anymore, but no data is coming.</p>
  
  <p>I am getting data using $http get like this</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> var User = $("#UserID").text();
          $http({
              method: 'POST',
              url: '/Home/GetData/',
              data: { UserName: $("#UserID").text() }
          }).success(function (data) {
              $scope.GridData = angular.fromJson(data);
  
          });</code></pre>
  </div>
  </div>
  </p>
  
  <p>Angularjs 1.3.2</p>
  
  <p>_Layout.cshtml</p>
  
  <pre><code>   &lt;!DOCTYPE html&gt;
  &lt;html lang="en" xmlns:ng="http://angularjs.org" &gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /&gt;
      &lt;meta name="viewport" content="width=device-width" /&gt;
  
      &lt;!--[if lte IE 9]&gt;
      &lt;script src="xdomain.js" slave="http://example.org/proxy.html"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  
      @Scripts.Render("~/bundles/Angular")
      @Scripts.Render("~/bundles/modernizr")
      @Styles.Render("~/Angular/css")
  
      &lt;script src="~/Scripts/jquery-ui-1.10.4.custom.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $.ajaxSetup(
              {
                  cache: false
              });
          $(document).ready(function () {
  
              $(".openPopup").live("click", function (e) {
                  e.preventDefault();
  
                  $("#PopUp").addClass("dialog")
                      .attr("id", $(this)
                      .attr("data-dialog-id"))
                      .appendTo("body")
                      .dialog({
                          title: $(this)
                              .attr("data-dialog-title"), close: function () {
                                  //$(this).remove();
                              }, modal: true, height: 400, width: 900
                      }).load(this.href);
              });
              $(".close").live("click", function (e) {
  
                  $(this).closest(".dialog")
                      .dialog("close");
                  window.location.reload();
              });
          });
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;nav class="navbar navbar-default navbar-static-top"&gt;
          &lt;div class="container-fluid"&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
                      &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;a href="~/Home/Index" class="navbar-logo"&gt;
                      &lt;img src="@Url.Content("~/Images/xs.png")"&gt;
                      &lt;span&gt;BillPrep&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
  
              &lt;!-- Collection of nav links and other content for toggling --&gt;
              &lt;div id="navbar" class="navbar-collapse collapse"&gt;
                  &lt;ul class="nav navbar-nav"&gt;&lt;/ul&gt;
                  &lt;ul class="nav navbar-nav navbar-right"&gt;
                      &lt;li class="dropdown"&gt;
                          &lt;a id="dLabel" role="button" data-toggle="dropdown" aria-expanded="false" class="dropdown-toggle" data-target="#" href="#"&gt;
                              &lt;strong&gt;@Html.Action("LoginDisplay", "Home", new { Name = User.Identity.Name })&lt;/strong&gt; &lt;span class="caret"&gt;&lt;/span&gt;
                          &lt;/a&gt;
                          &lt;ul class="dropdown-menu" role="menu"&gt;
                              &lt;li&gt;&lt;a href="#"&gt;User Settings&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;System Settings&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;@Html.ActionLink("Sign Out", "Logout", "Home")&lt;/li&gt;
                          &lt;/ul&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  
      &lt;div&gt;
          @RenderSection("featured", required: false)
          @RenderBody()
      &lt;/div&gt;
  </code></pre>
  
  <p>Homepage.cshtml</p>
  
  <pre><code>&lt;script src="~/Scripts/angularjs/stacktrace.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
      $(document).ready(function () {
          angular.element(document).ready(function () {
                          angular.bootstrap(document.getElementById("HomeGrid"), ['ngGridApp']);
             // angular.bootstrap(document.getElementById("tabgrid"));
          });
      });
  &lt;/script&gt;
  &lt;div&gt;
  &lt;body  ng-controller="ngGridController" id="HomeGrid"&gt;
      &lt;style&gt;
          #myTabs div li.active a {
              background-color: lightsteelblue;
          }
  
          .gridStyle {
              border: 1px solid rgb(212,212,212);
              width: 400px;
          }
  
          .bold {
              color: black;
              font-weight: bold;
          }
      &lt;/style&gt;
      &lt;div ng-controller="TabsDemoCtrl" data-ng-init="init()" id="tabgrid"&gt;
  
  
          &lt;div id="UserID" ng-show="false"&gt;{{User}}&lt;/div&gt;
          &lt;loading&gt;&lt;/loading&gt;
          &lt;br /&gt;
          &lt;tabset ng-show="{{show1}}"&gt;
              &lt;tab id="Inbox" active="isFirstActive"&gt;
                  &lt;tab-heading&gt;
                      &lt;span class="glyphicon glyphicon-inbox" aria-hidden="true"&gt;&lt;/span&gt;
                     Inbox
                  &lt;/tab-heading&gt;
                  &lt;div class="ngGridStyle" ng-grid="ngGridViewInbox"&gt;&lt;/div&gt;
              &lt;/tab&gt;
              &lt;tab id="pending" active="isSecondActive"&gt;
                  &lt;tab-heading&gt;
                      &lt;span class="glyphicon glyphicon-folder-open" aria-hidden="true"&gt;&lt;/span&gt;
                     show2
                  &lt;/tab-heading&gt;
                  &lt;div class="ngGridStyle" ng-grid="ngGridView2" ng-show={{show2}}&gt;&lt;/div&gt;
              &lt;/tab&gt;
  </code></pre>
  
  <p>js file</p>
  
  <pre><code>var app = angular.module('ngGridApp', ['ngGrid', 'ui.bootstrap', 'logToServer'])
  .directive('loading', function () {
      return {
          restrict: 'E',
          replace: true,
          template: '&lt;div class="loading"&gt;&lt;img src="http://www.mytreedb.com/uploads/mytreedb/loader/ajax_loader_blue_512.gif" width="20" height="20" /&gt;LOADING...&lt;/div&gt;',
          link: function (scope, element, attr) {
              scope.$watch('loading', function (val) {
                  if (val)
                      $(element).show();
                  else
                      $(element).hide();
              });
          }
      }
  })
  
  TabsDemoCtrl.$inject = ["$scope", "$window"];
  angular.module('ngGridApp').controller('TabsDemoCtrl', TabsDemoCtrl);
  
  function TabsDemoCtrl($scope, $window) { $scope.User = ""; }
  
  ngGridController.$inject = ["$scope", "$http", "$interval"];
  
  app.controller('ngGridController', ngGridController);
  
  function ngGridController($scope, $http, $interval) {
      $scope.callAtInterval = function () {
          var User = $("#UserID").text();
          $http({
                  method: 'POST',
                  url: '/Home/GetData/',
                  data: { UserName: $("#UserID").text() }
              }).success(function (data) {
                  $scope.GridData = angular.fromJson(data);
  
              });
  </code></pre>