title: TypeError: Cannot read property '$$phase' of null - AngularJS
body: <p>I'm learning AngularJS and trying to develop a simple app. The app consist of 2 pages(sections) which are list and details.</p>
  
  <p>If I visit both page separately (manually enter the URL in the address bar), both pages loads fine without any error. But if I navigate to details page from list page, the console displays this error.</p>
  
  <pre><code>TypeError: Cannot read property '$$phase' of null
  at Object.$$debounceViewValueCommit (angular.min.js:293)
  at Object.$setViewValue (angular.min.js:293)
  at Array.&lt;anonymous&gt; (angular.min.js:315)
  at m.$digest (angular.min.js:145)
  at m.$apply (angular.min.js:147)
  at l (angular.min.js:101)
  at XMLHttpRequest.N.onload (angular.min.js:106)
  </code></pre>
  
  <p>However, the page still load fine but the error bothers me. What exactly is happening?</p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>var myApp = angular.module('myApp', ['ngRoute', 'heroControllers']);
  
  myApp.config(['$routeProvider', function ($routeProvider) {
      "use strict";
      $routeProvider.
      when('/list', {
          templateUrl: 'partials/list.html',
          controller: 'ListController'
      }).
      when('/details/:itemId', {
          templateUrl: 'partials/details.html',
          controller: 'DetailsController'
      }).
      otherwise({
          redirectTo: '/list'
      });
  }]);
  
  //controller
  var heroControllers = angular.module('heroControllers', []);
  
  heroControllers.controller('ListController', ['$scope', '$http', function ($scope, $http) {
      "use strict";
      $http.get('js/data.json').then(function (response) {
          $scope.hero = response.data;
          $scope.order = "nickname";
      });
  }]);
  
  heroControllers.controller('DetailsController', ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) {
      "use strict";
      $http.get('js/data.json').then(function (response) {
          $scope.hero = response.data;
          $scope.whichItem = $routeParams.itemId;
      });
  }]);
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" ng-app="myApp"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Angular Demo&lt;/title&gt;
      &lt;script src="lib/angular/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="lib/angular/angular-route.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="js/app.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="css/bootstrap.min.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-6 col-md-offset-3"&gt;
                  &lt;div class="page-header"&gt;
                      &lt;h1&gt;&lt;a href="#!/list"&gt;Heroes&lt;/a&gt;&lt;/h1&gt;
                  &lt;/div&gt;
                  &lt;div ng-view&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>list.html</strong></p>
  
  <pre><code>&lt;section&gt;
          &lt;div class="form-group"&gt;
              &lt;input ng-model="query" type="text" class="form-control" placeholder="Search for heroes" autofocus&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;label&gt;Sort by: &lt;/label&gt;
              &lt;select ng-model="order"&gt;
                  &lt;option value="nickname"&gt;Nickname&lt;/option&gt;
                  &lt;option value="name"&gt;Name&lt;/option&gt;
              &lt;/select&gt;
  
              &lt;input ng-model="direction" type="radio" name="direction" checked&gt;
              &lt;label&gt;Ascending&lt;/label&gt;
              &lt;input ng-model="direction" type="radio" name="direction" value="reverse"&gt;
              &lt;label&gt;Descending&lt;/label&gt;
          &lt;/div&gt;
          &lt;ul class="list-group"&gt;
              &lt;li class="list-group-item" ng-repeat="item in hero | filter: query | orderBy: order:direction"&gt;
                  &lt;a href="#!/details/{{hero.indexOf(item)}}"&gt;
                      &lt;img ng-src="images/{{item.imagename}}.png" alt="Photo of {{item.nickname}}"&gt;
                      &lt;div&gt;
                          &lt;h2&gt;{{item.nickname | uppercase}}&lt;/h2&gt;
                          &lt;h3&gt;{{item.name}}&lt;/h3&gt;
                      &lt;/div&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p><strong>details.html</strong></p>
  
  <pre><code>    &lt;section&gt;
          &lt;div ng-model="hero" class="jumbotron"&gt;
              &lt;h2&gt;{{hero[whichItem].nickname}}&lt;/h2&gt;
              &lt;div&gt;
                  &lt;h3&gt;{{hero[whichItem].name}}&lt;/h3&gt;
                  &lt;img ng-src="images/{{hero[whichItem].imagename}}.png" alt="Photo of {{hero[whichItem].imagename}}"&gt;
                  &lt;div&gt;{{hero[whichItem].lore}}&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;a href="#!/list"&gt;&amp;laquo; Back to search&lt;/a&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p><strong>data.json</strong></p>
  
  <pre><code>[
      {
          "nickname" : "Sniper",
          "imagename" : "sniper",
          "name" : "Kardel Sharpeye",
          "lore" : "Bla... Bla... Bla..."
      },
      {
          "nickname" : "Io",
          "imagename" : "io",
          "name" : "Wisp",
          "lore" : "Bla... Bla... Bla..."
      },
      {
          "nickname" : "Timbersaw",
          "imagename" : "timbersaw",
          "name" : "Rizzrack",
          "lore" : "Bla... Bla... Bla..."
      }
  ]
  </code></pre>