AngularJS routing works on W3Schools but nowhere else

I'm just learning AngularJS and I can't seem to get routing working no matter what I do, even copying examples verbatim.

I'm basing it off the examples provided on W3Schools, such as: http://www.w3schools.com/angular/tryit.asp?filename=try_ng_routing_template

The page I built is:

<!Doctype html>
<html data-ng-app="SUApp">
    <head>
        <link rel="stylesheet" type="text/css" href="SUStyleSheet.css" >
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
        <script src="SUApp.js"></script>
    </head>
    <body>
        <div id="Menu">
            <ul>
                <li><a href="#box">Create a new box</a></li>
            </ul>
        </div>
        <div data-ng-view></div>
    </body>
</html>

SUApp.js is:

var SUApp = angular.module('SUApp',['ngroute']);
SUApp.config(function($routeProvider){
    $routeProvider
        .when('/',
              {
                templateURL:'index.html'
              })
        .when('/box',
              {

                templateURL:'box.html'
              })
        .otherwise({redirectTo: '/'});
});

Box.html:

<div class ="box">
    <p>Hello World</p>
</div>

I've gone over it with a fine-toothed comb and I can't find anything technically wrong (which doesn't necessarily mean there isn't). What's really strange, though, is that even if I copy and paste the W3Schools example, it still doesn't work in any browser I've used (Chrome and IE).

Other AngularJS features have worked on the above page and module, for example if I remove the config and add in an controller. It's the config and routing in particular that are conking everything up.

Solution

You are missing a '/' in the view,

 <ul>
    <li><a href="#/Box">Create a new box</a></li>
    <li><a href="#/">Home</a></li>
 </ul>

Here is the working Plunker