My AngularJS routing is adding extra inputs to the URL

Question

I am using angularjs routing to navigate within my dashboard but when I navigate it keeps adding #%2F before the new extension there by not making it to go to a next page. What can I do?

index.HTML

<section ng-include="'views/navigation.html'" class="dashboard-navigation"></section>
<header class="dashboard-mobile-header tablet-hide"></header>
<section class="main-content">
    <div id="dashboard-content" class="dashboard-content clear-fix" >
        <div ng-view>
        </div>
    </div>
</section>

navigation.HTML

<ul>
    <li>
        <a ng-href="#/dashboard">
            <div id="index" class="navigation-item clear-fix" >
                <div class="icon dashboard"></div>
                <div>
                    <h2> <span> Dashboard</span></h2>
                    <span>Procurement Snapshot</span>
                </div>
            </div>
        </a>
    </li>
    <li>
        <a ng-href="#/usermanagement.html">
            <div id="regions" class="navigation-item clear-fix" >
                <div class="icon regions"></div>
                <div>
                    <h2>User Management</h2>
                    <span>Create New User</span>
                </div>
            </div>
        </a>
    </li>
</ul>

Router.js

ProcureEaseApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
    when('/dashboard', {
        templateUrl: 'views/dashboard.html',
        controller: 'DashboardController',
        caseInsensitiveMatch: true,
    }).
    when('/usermanagement', {
        templateUrl: 'views/usermanagement.html',
        controller: 'UserManagementController',
        caseInsensitiveMatch: true,
    });  
}])