I am trying to create a toggle button in Angular. What I have so far is:

<div class="btn-group">
  <a class="btn btn-primary pull-right"
     ng-click="toggleArchive(true)"
     ng-show="!patient.archived">Archive patient</a>
  <a class="btn btn-danger pull-right"
     ng-click="toggleArchive(false)"
     ng-show="patient.archived">Unarchive patient</a>
  .... some other buttons ....
</div>

Basically I achieve toggling, by having TWO buttons, and toggling between them. This is causing issues because the ng-hide just adds a display:none style to the button when it's hidden, which is causing me styling issues. Ideally I want to have ONE button, that has it's text, class and function call changed depending on the state of patient.archived.

What's a clean way to achieve this?

javascript angularjs
Edit
Report