Error: Cannot set var="navigator" because it will overwrite a read-only variable

I am starting the tutorial for OnsenUI (https://onsen.io/guide/overview.html), and I cannot run the boiler-plate code example.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="lib/onsen/css/onsenui.css"/>
    <link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css"/>
    <script src="lib/onsen/js/angular/angular.js"></script>
    <script src="lib/onsen/js/onsenui.js"></script>
    <script>
      var module = ons.bootstrap('my-app', ['onsen']);
      module.controller('AppController', function($scope) { });
      module.controller('PageController', function($scope) {
        ons.ready(function() {
          // Init code here
        });
      });
    </script>
  </head>
  <body ng-controller="AppController">
    <ons-navigator var="navigator">
      <ons-page ng-controller="PageController">
        <!-- Page content -->
      </ons-page>
    </ons-navigator>
  </body>
</html>

I put the js and css files in the right directory, and I receive a single error in the Google debug console: Error: Cannot set var="navigator" because it will overwrite a read-only variable. angular.js:12783

I have changed navigator to 'myNavigator' as is shown in the 'Onsen UI with plain JavaScript' example, and the error message disappears.

Is there something wrong with the boiler-plate code? My environment? Is 'navigator' significant or is it ok to just name it 'myNavigator' and carry on?

Solution

navigator is used internally, just call it with another name, like myNavigator, and it will work fine without throwing error.

Example:

http://codepen.io/andipavllo/pen/reYZEG