Clicking a bootstrap 4 tab link causes angularJS controller to refresh

I have a bizarre problem with bootstrap 4 tabs in an AngularJS app. I built the tabs on the html page using this guide under 'Javascript Behaviour' https://getbootstrap.com/docs/4.0/components/navs/

The issue is when I click on one the tab links it causes the angular controller to refresh. I tried it with a default template in that bootstrap link to be sure it wasn't my own markup causing the problem.. but it still happened.

This is my markup anyway.. but like I said.. its the same problem if I use the one from the link.

Is there a solution to this or do I have to markup my tab a different way? I suspect bootstrap 4 JS is causing an issue with angularJS somehow..?