Angular.js, iframes and Firefox

Question

I have a feeling I'm missing something obvious with this, but I can't make iframes to work in Firefox with Angular.js routes.

Here is a sample plunker code

The index.html file contains ng-view which loads main.html:

<div>
Main content here
<iframe src="#/child"></iframe>
</div>

The iframe points to the /child route, for which $routeProvider is configured to load child.html template:

angular.module('testappApp', [])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html'
      })
      .when('/child', {
        templateUrl: 'views/child.html'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

This works in Chrome and Safari, but not in Firefox and IE 10 (I assume earlier versions of IE won't work either). I appreciate any help, thanks!

Answer 1

@jpmorin so, I just found a workaround, which is kind of inspired by your previous suggestion. So, after I changed the iframe source from #/child to index.html/#/child, everything works! No need for multiple includes of angular etc. I don't fully understand why the original route fails in FF, but pointing directly to the file that bootstraps the app and then adding the route works.