Bootstrap 4 navs: prevent URL toggle & refresh

Question

I am using Bootstrap 4 and AngularJS to create an application. I need to use a modal in which I am using the navs from Bootstrap 4. What I do not like, is that the navs are using some hrefs that are appended to the url in the address bar. The problem is that the angular module has

$rootScope.$on('$locationChangeStart', function () {
...
});

and I also use $routeProvider for routes as "/", "/login" and "/register". Because of that, every time I change the tab in the nav in the modal, the background reloads and this is not really ok, because on reload a lot of requests to a server are made again.

I tried to make a simple fiddle. As you can see, if you change the nav tab, the URL is modified (there is a setInterval there, look in the console). Fiddle: http://jsfiddle.net/pxbndo3z/1/

How can I fix this?

Answer 1

Based on the answer from here: href causes unintended page reload with Angularjs and Twitter Bootstrap, I decided to use something like:

onclick="(function(e){e.preventDefault();})(event)"

on the hrefs of the nav tavs. It seems everything is working fine, so here we go!