I can't seem to reproduce this on jsFiddle (mhevery says it's because you need real async with delay to reproduce, but the only way I know to include templates for ngInclude in jsFiddle are inline script tags), but here's how to set it up with two local files:
index.html
<html>
<head>
<script src="http://docs.angularjs.org/angular-1.0.1.min.js"></script>
<script type="text/javascript">
angular.module('myApp', [], function($routeProvider) {
$routeProvider.when('/topic', {
controller: TopicsCtrl,
template: 'Controller: {{name}}'
});
$routeProvider.when('/topic/:topicId', {
controller: TopicCtrl,
template: 'Controller: {{name}}<br />Topic ID: {{params.topicId}}'
});
$routeProvider.otherwise({redirectTo: '/topic'});
});
function TopicsCtrl($scope) {
$scope.name = 'TopicsCtrl';
};
function TopicCtrl($scope) {
$scope.name = 'TopicCtrl';
$scope.params = $routeParams;
};
</script>
</head>
<body ng-app="myApp">
<div ng-include src="'app.html'"></div>
</body>
</html>
app.html
<a href="#/topic">All topics</a>
<a href="#/topic/1">Topic 1</a>
<a href="#/topic/2">Topic 2</a>
<a href="#/topic/3">Topic 3</a>
<hr />
<div ng-view></div>
Expected results:
Page loads, redirects to #/topic, and shows 'Controller: TopicCtrl' in the view.
Actual results:
Page loads, does not redirect. If you click any link, the proper view is loaded. However, if you then reload, the view will not be properly loaded.
If you move the ng-view into index.html it works fine.