Yeoman angular navigation route not working after successful composing

Yeoman angular navigation not working after successful composing. The code in index.html seems like below.

      <div class="collapse navbar-collapse" id="js-navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#/">Home</a></li>
          <li><a ng-href="#/about">About</a></li>
          <li><a ng-href="#/">Contact</a></li>
        </ul>
      </div>

Initial url after grunt serve seems like http://localhost:9000/#!/ . While clicking Home tab the url seems like http://localhost:9000/#!/#%2F . And while clicking About tab the url seems like http://localhost:9000/#!/#%2Fabout

How to solve the issue ?

• Method 1

Add the following to app.js

app.config(['$locationProvider', function($locationProvider) {

  $locationProvider.hashPrefix('');

}]);

• Method 2

Put an ! after # to solve the issue . Check the code given below.

<div class="collapse navbar-collapse" id="js-navbar-collapse">
 <ul class="nav navbar-nav">
  <li class="active"><a href="#!/">Home</a></li>
  <li><a ng-href="#!/about">About</a></li>
  <li><a ng-href="#!/">Contact</a></li>
 </ul>
</div>