Tab href change depending on $scope variable

I am using a set of tabs to access the properties of a object of a service, so I need a variable $stateParams variable identified as :trailID to persist across tab switches. I was using $rootScope but this does not work since it seems that the tabs don’t actually reload once I switch objects, thus the hrefs of the tabs are still referring to old variable.

I use an href within a ng-repeat to point to a specific address which loads the new set of tabs.

Is there another way that I should be doing this?

This is an example of the tabs.

<ion-tab title="Route" icon-off="ion-network" icon-on="ion-network" href="#/trails/{{trailId}}/route">


use ng-href directive or ui-sref from ui-router