title: AngularJS toggle button
body: <p>I am trying to create a toggle button in Angular. What I have so far is:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;btn-group&quot;&gt;
    &lt;a class=&quot;btn btn-primary pull-right&quot;
       ng-click=&quot;toggleArchive(true)&quot;
       ng-show=&quot;!patient.archived&quot;&gt;Archive patient&lt;/a&gt;
    &lt;a class=&quot;btn btn-danger pull-right&quot;
       ng-click=&quot;toggleArchive(false)&quot;
       ng-show=&quot;patient.archived&quot;&gt;Unarchive patient&lt;/a&gt;
    .... some other buttons ....
  &lt;/div&gt;
  </code></pre>
  <p>Basically I achieve toggling, by having TWO buttons, and toggling between them. This is causing issues because the <code>ng-hide</code> just adds a <code>display:none</code> 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 <code>patient.archived</code>.</p>
  <p>What's a clean way to achieve this?</p>