title: AngularJs: Node is undefined
body: <p>Using Angular JS on IE11 is causing "Node is undefined" error. This is the script.</p>
  
  <pre><code>&lt;html ng-app="app" id="ng-app"&gt;
  &lt;head&gt;
      &lt;title&gt;Show Fruit&lt;/title&gt;
      &lt;link href="include/styles.css" rel="stylesheet"&gt;
      &lt;!-- Use Bootstrap --&gt;
      &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="include/app.js"&gt;&lt;/script&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=11" /&gt;  
  &lt;/head&gt;
  
  &lt;body ng-controller="HttpCtrl as app"&gt;
  &lt;div class="container"&gt;
      &lt;div class="header"&gt;
          &lt;h1 class="custom"&gt;Actors' Favorite Fruits&lt;/h1&gt;
      &lt;/div&gt;
  
      &lt;div class="leftPanel"&gt;
          &lt;div class="LeftPanelHeader"&gt;{{navTitle}}&lt;/div&gt;
          &lt;table class="side"&gt;
            &lt;tr ng-repeat="f in fruits" ng-click="getActor(f.id)"&gt;
              &lt;td class="side"&gt;{{f.name}}&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Works fine on Firefox and Chrome. Checked everywhere for IE11 related problems with Angular JS. Any help is appreciated.</p>
  
  <p>Thankx</p>
  
  <p>Complete index.jsp</p>
  
  <pre><code>&lt;html &gt;
  &lt;head&gt;
      &lt;title&gt;Show Fruit&lt;/title&gt;
      &lt;link href="include/styles.css" rel="stylesheet"&gt;
      &lt;!-- Use Bootstrap --&gt;
      &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular-route.min.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript" src="include/app.js"&gt;&lt;/script&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;/head&gt;
  
  &lt;body ng-app="app"&gt;
  &lt;!-- &lt;div ng-controller="HttpCtrl as app"&gt; --&gt;
  &lt;div class="container"&gt;
      &lt;div class="header"&gt;
          &lt;h1 class="custom"&gt;Actors' Favorite Fruits&lt;/h1&gt;
      &lt;/div&gt;
  
      &lt;div class="leftPanel"&gt;
          &lt;div class="LeftPanelHeader"&gt;{{navTitle}}&lt;/div&gt;
          &lt;table class="side"&gt;
            &lt;tr ng-repeat="a in actors" ng-click="getActor(a.id)" &gt;
              &lt;td class="side"&gt;{{a.name}}&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  
      &lt;div class="RightPanel"&gt;
          &lt;image src="{{actor.image}}" width="220"&gt;
      &lt;/div&gt;
  
      &lt;div class="MainBody"&gt;
          &lt;form&gt;
              &lt;table&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;input type="text" ng-model="searchName" size="30"&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;button type="button" ng-click="searchActor(searchName)" class="btn btn-primary btn-sm"&gt;
                      &lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt; Search &lt;/button&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;button ng-click="addNew()" class="btn btn-primary btn-sm"&gt;
                      &lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt; Add New &lt;/button&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;button ng-click="resetSearch()"  class="btn btn-info btn-sm"&gt;
                      &lt;span class="glyphicon glyphicon-refresh"&gt;&lt;/span&gt; Reset Search &lt;/button&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/form&gt;
  
          &lt;form id="main"&gt;
              &lt;table&gt;
                  &lt;tr&gt;
                      &lt;td class="display_bold"&gt;&lt;label for="actor.name"&gt;ID:&lt;/label&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="display"&gt;&lt;input id="id" type="text" ng-model="actor.id" size="4"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="display_bold"&gt;&lt;label for="name"&gt;Fruit:&lt;/label&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="display"&gt;&lt;input type="text" ng-model="actor.name" size="30"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="display_bold"&gt;&lt;label for="name"&gt;Favorite Fruit Of:&lt;/label&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="display"&gt;&lt;input type="text" ng-model="actor.birthName" size="40"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="display_bold"&gt;&lt;label for="name"&gt;Birth Date:&lt;/label&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="display"&gt;&lt;input type="text" ng-model="actor.birthDate" size="20"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="display_bold"&gt;&lt;label for="name"&gt;Email:&lt;/label&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="display"&gt;&lt;input type="text" ng-model="actor.email" size="30"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="display_bold"&gt;&lt;label for="name"&gt;Image:&lt;/label&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="display"&gt;&lt;input type="text" ng-model="actor.image" size="80"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="display_bold"&gt;&lt;label for="name"&gt;IsActive:&lt;/label&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="display"&gt;&lt;input type="text" ng-model="actor.active" size="10"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr&gt;
                      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                        &lt;table&gt;                           
                          &lt;tr&gt;
                            &lt;td&gt;&lt;button ng-click="saveActor(actor.id)" class="btn btn-success btn-sm" title="Save actor's details..." ng-disabled="isSaveDisabled"&gt;
                            &lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt; Save &lt;/button&gt;&lt;/td&gt;
                            &lt;td&gt;&lt;button ng-click="deleteActor(actor.id)" class="btn btn-danger btn-sm" ng-disabled="isDeleteDisabled"&gt;
                            &lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt; Delete &lt;/button&gt;&lt;/td&gt;       
                          &lt;/tr&gt;
                        &lt;/table&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
  
              &lt;/table&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  
      &lt;div class="footer"&gt;AngularJS Demo &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>Complete app.js</p>
  
  <pre><code>(function() {
  
  var app = angular.module("app", ['ngRoute']);
  app.config(function($routeProvider) {
      $routeProvider
          .when('/home', {
              templateUrl: 'index.jsp',
              controller: 'HttpCtrl'
          })
          .otherwise({
              redirectTo: '/homev'
          });
  });
  
  app.controller("HttpCtrl", function($scope, $http) {
      var app = this;
      $scope.navTitle = 'All Stars';
      $scope.operation="";
      $scope.isSaveDisabled = true;
      $scope.isDeleteDisabled = true;
  
      var response = $http.get('/AngularWs/rest/actors/');
      response.success(function(data) {
          $scope.actors = data;
          console.log("[main] # of items: " + data.length)
          angular.forEach(data, function(element) {
              console.log("[main] actor: " + element.name);
          });
      })
      response.error(function(data, status, headers, config) {
          alert("AJAX failed to get data, status=" + status);
      })
  
  
      $scope.getActor = function(id) {
          var response = $http.get('/AngularWs/rest/actors/'+ id );
  
          response.success(function(data) {
              $scope.actor = data;
              $scope.operation="update";
              $scope.isSaveDisabled = false;
              $scope.isDeleteDisabled = false;
          })
  
          response.error(function(data, status, headers, config) {
              alert("AJAX failed to get data, status=" + status);
          })
      };
  
      $scope.searchActor = function(name) {
          var app = this;
          $scope.navTitle = 'Search Criteria';
  
          var response = $http.get('/AngularWs/rest/actors/search/' + name);
          response.success(function(data) {
              $scope.actors = data;
              $scope.$apply();
  
              console.log("[searchActor] # of items: " + data.length)
              angular.forEach(data, function(element) {
                  console.log("[searchActor] actor: " + element.name);
              });
  
          });
  
          response.error(function(data, status, headers, config) {
              alert("AJAX failed to get data, status=" + status);
          })
      };
  
      $scope.clearForm = function() {
          $scope.actor = {
                  id:'',
                  name:'',
                  birthName:'',
                  birthDate:'',
                  email:'',
                  image:'',
                  active:''
          };
      }
  
      $scope.addNew = function(element) {
          $scope.operation="create";
          $scope.clearForm();
          main.id.focus();
          $scope.isSaveDisabled = false;
          $scope.isDeleteDisabled = true;
      }
  
      $scope.saveActor = function(id) {
          $scope.jsonObj = angular.toJson($scope.actor, false);
          console.log("[update] data: " + $scope.jsonObj);
  
          if ($scope.operation == "update") {
              var response = $http.put('/AngularWs/rest/actors/' + id, $scope.jsonObj);
              response.success(function(data, status, headers, config) {
                  $scope.resetSearch();
              });
  
              response.error(function(data, status, headers, config) {
                  alert("AJAX failed to get data, status=" + status);
              })
          } else if ($scope.operation == "create") {
              var response = $http.post('/AngularWs/rest/actors/add', $scope.jsonObj);
              response.success(function(data, status, headers, config) {
                  $scope.resetSearch();
              });
  
              response.error(function(data, status, headers, config) {
                  alert("AJAX failed to get data, status=" + status);
              })  
          }
      };
  
      $scope.deleteActor = function(id) {
          var response = $http.delete('/AngularWs/rest/actors/' + id);
          response.success(function(data, status, headers, config) {
              $scope.resetSearch();
          });
  
          response.error(function(data, status, headers, config) {
              alert("AJAX failed to get data, status=" + status);
          })
      };
  
      $scope.resetSearch = function(name) {
          var app = this;
          $scope.operation="";
          $scope.clearForm();
          $scope.isSaveDisabled = true;
          $scope.isDeleteDisabled = true;
          $scope.navTitle = 'All Stars';
          $scope.searchName = '';
  
          var response = $http.get('/AngularWs/rest/actors/');
          response.success(function(data) {
              $scope.actors = data;
              $scope.$apply();
              console.log("[resetSearch] # of items: " + data.length)
          });
  
          response.error(function(data, status, headers, config) {
              alert("AJAX failed to get data, status=" + status);
          })
      };
  
  }); 
  })();
  </code></pre>