javascript - AngularJS ng-view not showing up using $routeProvider templates -

directory structure:

public   film     - film.html     - film-controller.js   main     - main.html     - film-controller.js   - app.js   - index.html 

in index.html file have:

<div ng-view> </div> 

in body , ng-app="myapp" in starting html tag

app.js

angular.module('myapp', ['ngroute']).config(config);  function config($routeprovider) {     $routeprovider.when('/', {         templateurl: 'main/main.html',         controller: 'maincontroller',         controlleras: 'vm'     }).when('/film/:id', {         templateurl : 'film/film.html',         controller: 'filmcontroller',         controlleras: 'vm'     }).otherwise({         redirectto : '/'     }); } 

in main.html have <h1>hello {{vm.name}}</h1> line of code

in main-controller.js:

angular.module('myapp').controller('maincontroller', maincontroller);  function maincontroller($http) {     var vm = this;     $http.get('http://swapi-tpiros.rhcloud.com/films').then(function(response) {         vm.films = response.data;     });      vm.name = 'joseph'; } 

so when page loads expect see "hello joseph", instead nothing , if check console no errors. upon inspecting element, shows me <!-- ngview: --> inside body tags. tested routing , should navigate right address, why isn't template showing , why ng-view commented out?

i running app using python's simplehttpserver module, fyi.