Tabs will not display

Hi. I'm building an application where I need to have multiple tabs. The main tab should be the map tab, which currently works. However, I'm having trouble when switching between tabs as every tab but the main map displays as blank. Here is the index.html

<ion-pane>
	<ion-tabs class="tabs-icon-top tabs-balanced">
		<ion-tab title="Map" icon="ion-map" href="templates/map.html">
			<ion-nav-view></ion-nav-view>
		</ion-tab>

		<ion-tab title="Create" icon="ion-compose" href="templates/create.html">
		</ion-tab>

		<ion-tab title="User" icon="ion-person" href="templates/user.html">
			<ion-nav-view name="user-tab" on-select="userPage()"></ion-nav-view>
		</ion-tab>

		<ion-tab title="Search" icon="ion-search" href="templates/search.html">
		</ion-tab>
	</ion-tabs>
</ion-pane>

Only thing you might need to add in is the Google Maps API
<script src="http://maps.google.com/maps/api/js?key=INSERT_KEY_HERE&sensor=true"></script>

Here is the map.html, which is currently the only one that works

<ion-view>
	<ion-content>
		<div id="map" data-tap-disabled="true"></div>
	</ion-content>
</ion-view>

The user.html (what I'm trying to get to display)

<form ng-submit="authenticate(user,pass)">
	<div class="credentials">
		<label class="item item-input">
			<input type="email" placeholder="E-mail">
		</label>
		<label class="item item-input">
			<input type="password" placeholder="Password">
		</label>
	</div>
	<div class="padding">
		<button type="submit" class="button button-block button-positive">Submit</button>
	</div>
</form>

and finally, the JavaScript

angular.module('sale', ['ionic', 'ngCordova'])

.run(function($ionicPlatform) {
	$ionicPlatform.ready(function() {
		if(window.cordova && window.cordova.plugins.Keyboard) {
			cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
		}
		if(window.StatusBar) {
			StatusBar.styleDefault();
		}
	});
})

.config(function($stateProvider, $urlRouterProvider) {

	$stateProvider
	.state('map', {
		url: '/',
		templateUrl: 'templates/map.html',
		controller:'MapCtrl'
	});

	$urlRouterProvider.otherwise("/");

})

.controller('MapCtrl', function($scope, $state, $cordovaGeolocation) {
	var options = {timeout: 10000, enableHighAccuracy: true};

	$cordovaGeolocation.getCurrentPosition(options).then(function(position) {
		var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

		var mapOptions = {
			center: latLng,
			zoom: 15,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};

		$scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);

		google.maps.event.addListenerOnce($scope.map, 'idle', function() {
			var marker = new google.maps.Marker({
				map: $scope.map,
				animation: google.maps.Animation.DROP,
				position: latLng
			});
		});

	}, function(error) {
		console.log("Could not get location");
	});
});

If anyone could help at all, that'd be great. Any tips or recommendations regarding my design are welcome as well. I've been having a lot of trouble getting a hang of AngularJS as well as Ionic in general so I'm not sure if I'm even using the correct structures.

Thanks!