Ionic1 app gets reload on clicking a button - ionic-framework

Question

I have an ionic app with side-menu. My requirement is to have a Login Page before side-menu page.
By clicking on login button first time application gets reload, on clicking second time navigates to the side Menu page.
Here is my code
app.ts
config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'loginCtrl'
})
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.home', {
url: '/home',
cache: true,
views: {
'menuContent': {
templateUrl: 'templates/home.html',
controller: "homeController"
}
}
})
<ion-view>
<ion-content>
<div class="login-main-heading">
<h3 class="all-elements-center login-heading">Welcome</h3>
<div class="form-elements responsive-sm">
<h5 class="all-elements-center login-heading">Login</h5>
<form action="">
<div class="list list-inset">
<label class="item item-input">
<i class="icon ion-person placeholder-icon"></i>
<input type="text" placeholder="User Name">
</label>
<label class="item item-input">
<i class="icon ion-lock-combination placeholder-icon"></i>
<input type="password" placeholder="Password">
</label>
<div class="responsive-sm">
<button class="button button-large button-assertive button-login">
Login
</button>
<button class="button button-large button-assertive button-signup">
Sign Up
</button>
</div>
<div>
<button class="button button-block button-positive button-facebook- login" ng-click="login()">
Login
</button>
</div>
</div>
</form>
</div>
</ion-content>
</ion-view>
login-controller.js
angular.module('starter')
.controller('loginCtrl', function ($scope, $state,$ionicSideMenuDelegate) {
$scope.login = function () {
$state.go('app.home');
}
});
app-controller.js
angular.module('starter.controllers', [])
.controller('AppCtrl', function ($scope, $state) {
});