title: How can I make my AngularJS link disabled?
body: <p>My code looks like this:</p>
  
  <pre><code>    &lt;a ng-disabled="!access.authenticated"
              data-ng-class="{ 'current': $state.includes('home'), 'disabled': !access.authenticated } "
              href="/home/overview"
              title="Home"&gt;
          &lt;i class="fa fa-home fa-fw"&gt;&lt;/i&gt;
      &lt;/a&gt;
  </code></pre>
  
  <p>I want to make it so that when access.authenticated is false then the link cannot be clicked. What I thought of was changing the link to a button and then styling it like a link. However this does not work as a button does not cause the page URL to change. </p>
  
  <pre><code>    &lt;button ng-disabled="!access.authenticated"
              data-ng-class="{ 'current': $state.includes('home'), 'disabled': !access.authenticated } "
              href="/home/overview"
              title="Home"&gt;
          &lt;i class="fa fa-home fa-fw"&gt;&lt;/i&gt;
      &lt;/button&gt;
  </code></pre>
  
  <p>Can someone tell me how I can do what I need ?</p>