Permenantly removing tab buttons and tab bar

Hi,

I have an app that has an existing tabs-bar but I have no use for it now since all my buttons are in the header.

How do I structure the app.js file such that the app would still work, but without the tabs bar/ buttons? For example for the below, theres no need to reference to tab.something.somethingelse if theres no tab in the first place.

The basic app.js would be something like

.state('tab', {
  url: "/tab",
  abstract: true,
  templateUrl: "templates/tabs.html"
})
.state('tab.pet-index', {
  url: '/pets',
  views: {
    'pets-tab': {
      templateUrl: 'templates/pet-index.html',
      controller: 'PetIndexCtrl'
    }
  }
})

Is it possible to remove tab abstract state? it would greatly simplify the other routes imho.
Theres quite a fair bit of errors from wrong states and views names. And its quite a chore to have to troubleshoot each time i have a change. (its partly the Angular routing mechanism)

So far people have suggested using CSS or to alter the behavior of the tabs bar or hide it.

Any suggestions?