angularjs - Fixed Header showing when we navigate to different page in single page application -

i'm using datatables angularjs , fixedheader plugin works fine when table displayed on page. issue when navigate different page (single page application) using angular ui router, fixedheader header still shows.

does know why case?

it looks issue fixedheader plugin datatables.

there angular-datatables module @ https://l-lin.github.io/angular-datatables/#/welcome, has page plugins work it. page lists fixedheader plugin , mentions same issue seeing.

see https://l-lin.github.io/angular-datatables/#/withfixedheader.

this page says following:

beware when using routers. seems header , footer stay in dom when change application state. need tweak code remove them when exiting state.

it shows workaround angular-ui-router:

$stateprovider.state("contacts", {   templateurl: 'somewhereindaspace',   controller: function($scope, title){     // stuff   },   onenter: function(title){     // stuff   },   onexit: function(){     // remove datatables fixedheader plugin's headers , footers     var fixedheaderele = document.getelementsbyclassname('fixedheader');     angular.element(fixedheaderele).remove();     var fixedfooterele = document.getelementsbyclassname('fixedfooter');     angular.element(fixedfooterele).remove();   } });