AngularJS: Removing HTML element from DOM, but not its content

Question

I'm using AngularJS and I've got a doubt.

I have something like this:

<a href="#">
 <p>Hello World!</p>
</a>

I want to remove the anchor, but not its content. If I use ng-show/ng-hide, according to the condition it removes everything, the anchor and even the paragraph.

How can i remove just the anchor keeping the content displayed (but unlinked)?

Thanks!

Answer 1

use ng-href and an expression:

<a ng-href="{{show()? '#' : ''}}">
 <p>Hello World!</p>
</a>

Answer 2

Might not be best approach.

You can use

<a ng-if="condition == false">
 <p>Hello World!</p>
</a>    
<p ng-if="condition == true">Hello World!</p>

In place of ngIf you can use ngShow or ngHide