Routing in Angular 1.x

Question

I am trying to do routing in angular 1.x

 

This is my app.js file

var app = angular.module('app', ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('');
$urlRouterProvider.otherwise('/home');
$stateProvider
// State managing
.state('home', {
url: '/home',
templateUrl: 'home1.html',
controller:'Home1'
}).state('home2', {
url: '/home2',
templateUrl: 'home2.html',
controller:'Home2'
}).state('home3', {
url: '/home3',
templateUrl: 'home3.html',
controller: 'Home3'
})
})

I have added three js files home1,home2,home3 with controller name Home1,Home2,Home3 respectively

 

This is my code for all files

 

home1

app.controller('Home1', function ($scope, $rootScope, $location) {
$scope.name12345 = sessionStorage.getItem('name1234');
$scope.back = function () {
$location.path('home2')
}
});

home2

app.controller('Home2',function ($scope, $rootScope, $location) {
$scope.msg = "Welcome";
$scope.name = sessionStorage.getItem('name');
$scope.data2 = JSON.parse(sessionStorage.getItem('data1'));
console.log($scope.data2);
$scope.click2 = function (name) {
alert(name);
$scope.name123 = name;
sessionStorage.setItem('name1234',($scope.name123))
$location.path('home3')
}
})

home3

app.controller('Home3',function ($scope, $rootScope, $location) {
$scope.msg = "Welcome";
$scope.click = function () {
sessionStorage.setItem('name', ($scope.msg))
sessionStorage.setItem('data1', JSON.stringify($scope.data))
$location.path('/home2');
}
});

Now this controller and app module on all three html files home1.html,home2.html and home3.html

When I run home3.html it changes url name to home,instead of changing it to home3,you can check this code in app.js

state('home3', {
url: '/home3',
templateUrl: 'home3.html',
controller: 'Home3'
})

instead it consider this

 

$urlRouterProvider.otherwise('/home');

 

So my First question is when I run home3.html it should change url to home3,when I run home2.html it should change url to home2,when I run home1.html it should change url to home

 

And second question is I have used $location.path('home2') in this scenario I have to redirect to home2.html with home2 as Url but this is not happening to.

 

How to do this kindly guide me on this