angular-ui-routerのトップページについて

Question

以下のようなコードでルートURLにアクセスされた際にmain.htmlを表示したいのですが、「Failed to load template: main.html」というエラーになってしまいます。app.jsの「$urlRouterProvider.otherwise('/');」を削除して、Mainボタンをクリックすると正しく表示されません。原因がわからないのですがご教授いただけないでしょうか。

app.js

angular
    .module('myApp', ['ui.router'])
    .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('root', {
                url: '/',
                controller: 'MainCtrl',
                templateUrl: 'main.html'
            });
        $urlRouterProvider.otherwise('/');
    }]);

index.html

<div ui-view></div>
<ng-include src="'views/main.html'"></ng-include>
<button ui-sref="root">Main</button>

controllers/main.js

angular.module('myApp')
    .controller('MainCtrl', function () {
        console.log("MainCtrl");
    });

views/main.html

<script id="main.html" type="text/ng-template">
  hello
</script>