# AngularJS ng-view problem on Firefox

By default, multiple ng-view is not supported by AngularJS. Assume that we have some pages with different layout as the code bellow:

```xml
<div class="container-master" ng-switch="" on="layout">	 	
	<div ng-switch-when="landing" ng-view=""></div>	 	 
	<div ng-switch-when="404">
		<div ng-include="" src="'views/header.html'"></div>	 	 		
		<div ng-view=""></div>	 	 			
	</div>	 	 	
	<div ng-switch-when="default">	 	 
		<div ng-include="" src="'views/header.html'"></div>	 	 
		<div id="container">
			<div id="sidebar-right">
				<div class="site-ad">
					<img src="styles/img/layout/ad_1.jpg" alt="Example Ad" title="Example Ad">
					<img src="styles/img/layout/ad_2.jpg" alt="Example Ad" title="Example Ad">
				</div>
			</div>
			<div id="main-content" ng-view=""></div>
		</div>		
	</div>
</div>
```

As you can see, we have 3 ng-view directive and use ng-switch to decide which layout will be used. When running on Chrome browser, everything is fine. AngularJS uses only one ng-view (which matched with ng-switch-when). But on Firefox, the data will be put to all ng-view, but only the div which matched with ng-swith-when is shown (the other is hidden), it also sends as many request as ng-view has, too.

Currently I cannot find the solution for this case so I reorganized the HTML to use only one ng-view:

```xml
<div ng-include="" src="'views/header.html'" ng-show="layout != 'landing'"></div>	 	
<div id="container" ng-class="{'landing-wrapper': layout != 'default'}">	 	 
	<div id="sidebar-right" ng-show="layout == 'default'">	 	 		
		<div class="site-ad">	 	 		
			<img src="styles/img/layout/ad_1.jpg" alt="Example Ad" title="Example Ad">
			<img src="styles/img/layout/ad_2.jpg" alt="Example Ad" title="Example Ad">
		</div>
	</div>	 	 
</div>
<div id="main-content" ng-view=""></div>
```