404 issue with ng-include inside of ng-view - html

Question

I've searched everywhere for the answer but unfortunately I didn't find anything.
I have a working Angular application that looks like this:
...
<div class="container" ng-app="myApp">
<div class="page-title">
<h1>
Hello
</h1>
</div>
<div ng-view></div>
</div>
...
I'm working with ngRoute to load html partials into the ng-view div.
my JS:
var myApp = angular.module('myApp', [
'ngRoute',
'myControllers'
]);
myApp.config(['$routeProvider', '$httpProvider',
function($routeProvider, $httpProvider) {
$routeProvider.
when('/step1', {
templateUrl: 'template1.html',
controller: 'Step1Controller'
}).
when('/step2', {
templateUrl: 'template2.html',
controller: 'Step2Controller'
}).
when('/step3', {
templateUrl: 'template3.html',
controller: 'Step3Controller'
}).
otherwise({
redirectTo: '/step1'
});
}]);
Up to here, everything works as a charm. I already completed pretty much everything I needed (a multi stepped wizard).
On the last step, I needed to use <script type="text/ng-template" id="specialTemplate.html"></script> to generate some special template (a tree)
So, in my last step page partial (template3.html) I did the following:
<ul>
<li ng-repeat="item in [1,2,3]" ng-include="'specialTemplate.html'"></li>
</ul>
<script type="text/ng-template" id="specialTemplate.html">
Test
</script>
Here I got stuck. I'm getting 404 errors on console (he tries to look up specialTemplate.html in the same directory my browser's url points to), and the template does not load.
When I made some tests I saw that if the ng-include is outside of the ng-view, but inside a clean ng-controller separated from my current working flow, It does find and load the template, but this doesn't help me because I must render the tree within my working steps flow.
Is it impossible to load a <script> based template inside ng-view?
Thanks in advance for your help.
EDIT:
Version: AngularJS v1.3.0-beta.3

Answer 1

it could be that when you try to grab specialTemplate.html from within ngView it changes the url being pointed to by ngInclude. Try hardcoding the path to specialTemplate.html. Or you could try putting your script inside the li because it might also be a scope issue.

Answer 2

If you are testing in a local Windows system, then not serving up your pages from http-server might be the problem.
As a fix, install http-server globally using the commnd:
npm install -g http-server
and remember to use a sudo for Linux system.
Once the server installed, start the server using the command:
http-server
Now, go to http://127.0.0.1:8080/ in your browser and navigate to your desired page.