Ionic href not working

I am just want to navigate to another page. but href is not working.

HTML Code:

<a class="item item-avatar" href="#/app/top">
  <img src="../img/cool.png">
  <h2>Cool Status <p style="float:right;"> >></p></h2>
</a>

In the App.js

.config(function($stateProvider, $urlRouterProvider) {
$stateProvider

 .state('app.top', {
  url: '/top',
  views: {
    'menuContent': {
      templateUrl: 'templates/top.html'
    }
  }
 });
});

I am also reading forum on https://forum.ionicframework.com/t/ionic-href-not-working/17750 but still href not working

I'm assuming that any form of navigation would work.

HTML Code:

<a class="item item-avatar" href="#/top">
  <img src="../img/cool.png">
  <h2>Cool Status <p style="float:right;"> >></p></h2>
</a>

App.js

.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('top', {
            url: '/top',
            templateUrl: 'templates/top.html'
        });

    $urlRouterProvider.otherwise("/");
});