How to deal with unexpected page reload in Angular.js Single Page Application?

Question

JavaScript

Faced a problem, in my application I use the standard angular.js router:

$routeProvider
            .when('/', {templateUrl: '/js/app/index/index.html'})
            .when('/payments', {templateUrl: '/js/app/payments/index.html'})
            .when('/payments/:payment_id', {templateUrl: '/js/app/payment_form/index.html'})
            .otherwise({redirectTo: '/'});

Next, the following script (regular links with the ng-href parameter are used for transitions):
1. Go to /payments
2. Go to /payments/4

<a data-ng-href="/payments/{{payment.service_id}}">

3. Press the back button
<a data-ng-href="/payments">
4. Go to "/payments/4" again, the page is completely reloaded, then the router works and the required form opens. On the first transition, there is no reboot.
Tell me where to dig, why the second and subsequent transitions start reloading the page, and only when switching to a specific payment. If you go to the other 2nd ("/", "/payments") pages, there are no transitions?

Answer 1

There was a code:
I tried to remove the ng-bind and ng-if directives in the parent and child elements, respectively. It seems to have gotten better. But! I noticed that if we hit the inner span with ng-bind, then everything is OK, the page does not reload. If we hit the a element, the page reloads. (link has display:block property; span has inline property). Okay, we move the indents of the link to the span, add display:block and, voila, it all worked. The crutch is of course hellish, why this is happening I can’t understand. Those. if we click on the child element of the link, all is well. If on the link itself, the page is reloaded.
The code became:

<div  data-ng-if="payment.type !== 'group'">
  <a data-ng-href="/payments/{{payment.service_id}}"><span  data-ng-bind="payment.www_name" class="link_pressable"></span></a>
</div>