$location.path not routing to correct page - angularjs

Question

I'm using the Ionic framework and I have a tabbed interface which uses routing with templates. For some reason no matter what URL I put into the $location.path it doesn't route to the correct place. I'm using the same URL I've been using before and I've never run into any problems so I don't understand why its not working.
Here is my tabs.html (Settings tab is not working):
<ion-tabs ng-controller = "tabs" class="tabs-icon-top tabs-color-active-positive">
<!-- Articles Tab -->
<ion-tab title="Articles" icon-off="ion-ios-paper-outline" icon-on="ion-ios-paper" href="#/tab/article">
<ion-nav-view name="tab-article">
</ion-nav-view>
</ion-tab>
<!-- Closets Tab -->
<ion-tab title="Closet" icon-off="ion-ios-briefcase-outline" icon-on="ion-ios-briefcase" href="#/tab/closet">
<ion-nav-view name="tab-closet"></ion-nav-view>
</ion-tab>
<!-- Settings Tab -->
<ion-tab title="Settings" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" on-select = "redirect()" ><!--href="#/tab/settings">-->
<ion-nav-view name="tab-settings"></ion-nav-view>
</ion-tab>
</ion-tabs>
Here is my controller (The redirect function gets called when the settings tab is selected):
.controller('tabs', function($scope, Settings, $rootScope, $location, $window) {
$scope.redirect = function() {
if($rootScope.loggedOn) {
console.log("ASSDA");
$window.location.href = "#/tab/logIn";
// $location.path("#/tab/logIn");
}
else {
$window.location.href = "#/tab/logIn";
// $location.path("#/tab/logIn");
}
}
});
As you can see i've tried both $window.location.href and $locaion.path - both didn't work. When the Settings tab is selected it just defaults to the article tab. Once your on the articles page and you click back onto settings it defaults back to the article page but this time you get a blank page. It is hitting my console.log("ASSDA") so the if statement is returning true.
Here is how my routes are set up:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
// Each tab has its own nav history stack:
.state('tab.article', {
url: '/article',
views: {
'tab-article': {
templateUrl: 'templates/tab-article.html',
controller: 'articlesController'
}
}
})
.state('tab.closet', {
url: '/closet',
views: {
'tab-closet': {
templateUrl:'templates/tab-closet.html',
controller: 'closetController'
}
}
})
.state('tab.settings', {
url: '/settings',
views: {
'tab-settings': {
templateUrl: 'templates/tab-settings.html',
controller: 'settingsController'
}
}
})
.state('tab.login', {
url: '/login',
templateUrl: 'templates/tab-login.html',
controller: 'settingsController'
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/article');
});

Answer 1

app.js
var app = angular.module('ionicApp', ['ionic'])
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/tab/article");
$stateProvider
.state('tab', {
url: '/tab',
templateUrl: 'tab.html',
abstract: true
}).state('tab.article', {
url: '/article',
views: {
'tab-article': {
templateUrl: 'templates/tab-article.html',
controller: 'articlesController'
}
}
})
.state('tab.closet', {
url: '/closet',
views: {
'tab-closet': {
templateUrl: 'templates/tab-closet.html',
controller: 'closetController'
}
}
})
.state('tab.settings', {
url: '/settings',
views: {
'tab-settings': {
templateUrl: 'templates/tab-settings.html',
controller: 'settingsController'
}
}
})
})
.controller('articlesController', function($scope) {})
.controller('closetController', function($scope) {})
.controller('settingsController', function($scope) {})
Add codes in index.html
<ion-nav-bar class="bar-energized nav-title-slide-ios">
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="tab.html" type='text/ng-template'>
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<ion-tab title="Articles" icon-off="ion-ios-paper-outline" icon-on="ion-ios-paper" ui-sref="tab.article">
<ion-nav-view name="tab-article">
</ion-nav-view>
</ion-tab>
<ion-tab title="Closet" icon-off="ion-ios-briefcase-outline" icon-on="ion-ios-briefcase" ui-sref="tab.closet">
<ion-nav-view name="tab-closet"></ion-nav-view>
</ion-tab>
<ion-tab title="Settings" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" ui-sref="tab.settings">
<ion-nav-view name="tab-settings"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id='templates/tab-article.html' type='text/ng-template'>
<ion-view title="Articles Page">
<ion-content>
Articles page
</ion-content>
</ion-view>
</script>
<script id='templates/tab-closet.html' type='text/ng-template'>
<ion-view title="Closet Page">
<ion-content>
Closet page
</ion-content>
</ion-view>
</script>
<script id='templates/tab-settings.html' type='text/ng-template'>
<ion-view title="Settings Page">
<ion-content>
Settings page
</ion-content>
</ion-view>
</script>

Answer 2

I figured this out, I actually needed to add another hidden login tab in my tabs.html. I guess it was looking for a login tab which didn't exist - adding it to tabs.html fixed it. So it would be:
<ion-tab title="LogIn" hidden="true">
<ion-nav-view name="tab-logIn"></ion-nav-view>
</ion-tab>