AngularJS : Using angular-ui-router with electron

I'm trying to integrate angular, angular-ui-router and electron to build a desktop app which is also a single page application. I'm unable to get a proper route configuration using angular-ui-router without messing up the file paths.

Below is my routes config.

/*
 * Fetch angular template for given page
 */
var getTemplate = function (page) {
    return ['getView', function (getView) {
        return getView.get(page);
    }];
};
var skeletonStateConfig = function () {
    var config = {
        abstract: true,
        url: '',
        controller: 'site',
        views: {
            s: {
                templateProvider: getTemplate('p/out')
            }
        }
    };
    return config;
};

/*
 |------------------------------------------------------------------
 | Configure root page states
 |------------------------------------------------------------------
 */

var pageStateConfig = function (page, url, controller) {

    var config = {
        views: {
            'p@': {
                templateProvider: getTemplate(page)
            }
        }
    };
    if (angular.isUndefined(url)) {
        url = page;
    }
    if (url !== '') {
        config.url = '/' + url;
    }

    if (angular.isDefined(controller)) {
        /* Specific controller is allocated for this route */
        config.views['p@'].controller = controller + ' as PageCtrl';
    } else if (controller !== false) {
        /* Replace hyphens in page name to underscore to get angular controller */
        config.views['p@'].controller = page.replace(/-/g, '_') + ' as PageCtrl';
        /* oc lazy load resolve */
        config.resolve = {
            oc: ['$ocLazyLoad', function ($ocLazyLoad) {
                return $ocLazyLoad.load({
                    name: 'oc',
                    files: [page]
                });
            }]
        };
    }
    return config;
};

/*
 |------------------------------------------------------------------
 | States configuration
 |------------------------------------------------------------------
 */

$stateProvider
    .state('p', skeletonStateConfig())
    .state('p.login', pageStateConfig('login', 'login', 'login'));
/*
 |------------------------------------------------------------------
 | Redirects and Otherwise
 |------------------------------------------------------------------
 |
 | Use $urlRouterProvider to configure any redirects (when)
 | and invalid urls (otherwise)
 |
 */

$urlRouterProvider.otherwise('/login');

To summarise, p is the initial state which is abstract. It loads the skeleton of the app. p.login state is the state for the home page and it loads the content for the home page.

When the app is opened, it triggers $urlRouterProvider.otherwise('/login') and p.login state is loaded.

But, on refresh I get the following error. GET file:///login net::ERR_FILE_NOT_FOUND Navigated to data:text/html,chromewebdata

On removing $urlRouterProvider.otherwise('/login'), the app always loads the index.html file. So, how to do I goto p.login state without messing up the paths?