$state didn't navigate properly

I want to navigate from page A to B, so in my page A (history.html) view I did this

<a href="#/history/{{data.id}}">
    <li class="item">
    {{data.items}}
    </li>
</a>

and in my app.js the state is set like this

.state('app.history', {
    url: "/history",
    views: {
        'menuContent': {
            templateUrl: "templates/history.html",
            controller: 'historyCtrl'
        }
    }
})

.state('app.history2', {
    url: "/history/:id",
    views: {
        'menuContent': {
            templateUrl: "templates/history2.html",
            controller: 'history2Ctrl'
        }
    }
})

So supposedly it should be fine but it navigated to somewhere, what else is needed? Am I miss something? I visit the link manually by adding some numbers at the end, eg http://localhost:8100/#/app/history/123 and it worked just fine.

use ng-href instead:

<a ng-href="{{'#/app/history/'+data.id}}">
    <li class="item">
    {{data.items}}
    </li>
    </a>

Also it would be better if you could nest a inside li

<li class="item">
    <a ng-href="{{'#/app/history/'+data.id}}">
       {{data.items}}
    </a>
</li>

I solved it by doing this

<div class="list">
    <a ng-repeat="data in savedData" href="#/app/history/{{data.id}}">
      {{data.items}}
    </a>
</div>

which I have no idea why lol

Did you try to use ng-href instead of href?

As I now, href link may be wrong if the angular library doesn't finish loading at the time user click on it.