Ionic how to go back inside a nested view

I can't see to get go back transition to work.

I have this abstract view called main that holds this child views.

    <div class="bar bar-header bar-stable">
        <a href="javascript:history.back(-1);" class="button button-icon icon ion-ios-arrow-left"></a>
        <button class="button button-clear button-positive">Log out</button>
    </div>

<div class="clearfix"></div>

<ion-side-menus>
    <!-- Center content -->
    <ion-side-menu-content style="padding-top: 45px">
        <ion-nav-view name="categories"></ion-nav-view>
        <ion-nav-view name="products"></ion-nav-view>
        <ion-nav-view name="payments"></ion-nav-view>
    </ion-side-menu-content>

    <!-- Left menu -->
    <ion-side-menu expose-aside-when="large" style="padding-top: 45px">
        <ion-view>
            <ion-content>
                <ul class="list has-header" id="itemLists">

                </ul>
            </ion-content>
        </ion-view>
        <div class="bar bar-subfooter auto-height" style="padding:0">
            <ul class="list">
                <li class="item">Total <span class="pull-right" id="total"></span></li>
            </ul>
        </div>

        <div class="bar bar-footer">
            <div class="text-center">
                <div class="bar bar-footer bar-positive">
                    <a href="#/main/payments" class="no-underline"><div class="title">Pay</div></a>
                </div>
            </div>
        </div>
    </ion-side-menu>
</ion-side-menus>

This is my app.js that holds all routes.

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngStorage'])

.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if(window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
})

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

    $ionicConfigProvider.views.transition('none');

    $urlRouterProvider.otherwise('/');

    $stateProvider

        .state('login',{
            url: '/',
            templateUrl: 'templates/login.html',
            controller: 'loginController'
        })

        .state('main', {
            url: '/main',
            templateUrl: 'templates/main.html',
            controller:   'mainController',
            abstract: true
        })

        .state('main.categories', {
            url: '/categories',
            views: {
                'categories': {
                    templateUrl: 'templates/categories.html',
                    controller: 'categoriesController'
                }
            }
        })

        .state('main.products', {
            url: '/products/:productId',
            views: {
                'products': {
                    templateUrl: 'templates/products.html',
                    controller: 'productsController'
                }
            }
        })

        .state('main.payments', {
            url: '/payments',
            views: {
                'payments': {
                    templateUrl: 'templates/payments.html',
                    controller: 'paymentsController'
                }
            }
        })

})

I have this state main.products which a child of the main abstract view.

When I click the pay button on the left-down corner, it takes me to the main.payments view.

This is the code for the main.payments view

<ion-view view-title='Payments'>
<ion-content>
    <div class="row">
        <div class="col col-25">
            <a href="#/cash" class="button button-large button-block button-balanced">Cash</a>
        </div>
        <div class="col col-25">
            <a href="#" class="button button-large button-block button-calm">Credit Card</a>
        </div>
        <div class="col col-25">
            <a href="#" class="button button-large button-block button-energized">Discount</a>
        </div>
        <div class="col col-25">
            <button ng-click="cancel()" class="button button-large button-block button-assertive">Cancel</button>
        </div>
    </div>
    <div class="row">
        <div class="col col-25">
            <button ng-click="goBack()" class="button button-large button-block button-royal">Go Back</button>
        </div>
    </div>
</ion-content>

Now when I press the go back button the URL in the page changes to the previous page but the view doesn't transition there, until I refresh the page.

This is my payment controller that handles the go back button transition.

.controller('paymentsController', function($scope, $localStorage, $log, $state, $window, $ionicHistory){

$scope.cancel = function(){

    $localStorage.total= '';

    $state.go('main.categories');

    $window.location.reload();

};

$scope.goBack = function(){

    $ionicHistory.goBack();

}


})