I have a header with two elements that when links are clicked it should take me to two different URL's:

<header ng-controller="myHeader">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="/">AngularJS Weather</a>
            </div>

            <nav class="nav nav-pills nav-fill">
                <a href="#/" class="nav-link" ng-click="activeNav = 1" ng-class=" { 'nav-link active': activeNav === 1, 'nav-link': activeNav !== 1}"> Home </a>
                <a href="#/data" class="nav-link" ng-click="activeNav = 2" ng-class=" { 'nav-link active': activeNav === 2, 'nav-link': activeNav !== 2 }"> Data Base </a>
            </nav>
        </div>
    </nav>
</header>

Then I have my controllers with the ROUTE service from angular but when clicking on those two items instead of getting what I expected:

• HOME - index.html#/
• DATA - index.html#/data

Instead I am getting these resutls:

• HOME - index.html#!/#%2F
• DATA - index.html#!/#%2Fdata

Even at home page my URL is: index.html#!/

I don´t know why it is not: index.html#/

Please, I would appreciate any help

Thanks