Angular ui-router nested views - the page isn't loading when direct url is used

I'm trying to access a nested view with the direct url, without navigating through links but it's not working.

My config is:

myApp.config(function ($stateProvider, $locationProvider) {
    $stateProvider
        .state('st1', {
            url: '/st1',
            templateUrl: 'st1.html',
        })
        .state('st1.st2', {
            url: '/st2',
            templateUrl: 'st2.html',
        })
    ;
    $locationProvider.html5Mode(true);
});

st1.html:

<h1>ST1</h1>

<div ui-view></div>

<a ui-sref="st1.st2">ST2</a>

st2.html:

<h2>ST2</h2>

<a ui-sref="st1">ST1</a>

I go directly to /st1, typing it not clicking a link, st1 html shows up.

When I click the link in st1, the location path changes to /st1/st2 and st2's content shows up, that is what I want, but when I refresh on /st1/st2 the page is empty.

What do I miss?