javascript - Changing DOM element type depending on AngularJS variable -

what trying achieve depending on scope variable dom element change type..

so have scope var like:

$scope.post = {     title:          'post title goes here!',     slug:           'post-title-goes-here',     category:       'news',     featured_image: '//src.jpg' }; 

and dom element like:

<a href="#/post/{{post.slug}}">     <div style="background-image: url({{post.featured_image}});">         <small ng-if="post.category">{{post.category}}</small>         <h3>{{post.title}}</h3>     </div> </a> 

but if var $scope.post.slug empty dom element like:

<div>     <div style="background-image: url({{post.featured_image}});">         <small ng-if="post.category">{{post.category}}</small>         <h3>{{post.title}}</h3>     </div> </div> 

obviously can ng-if , duplicate each bit of code i'm trying avoid that!

something ideal:

<{{post.slug ? 'a href="#/post/'+post.slug+'"' : 'div'}}>     <div style="background-image: url({{post.featured_image}});">         <small ng-if="post.category">{{post.category}}</small>         <h3>{{post.title}}</h3>     </div> </{{post.slug ? 'a' : 'div'}}> 

i don't think can achieve directly angular. html needs defined before angular injects. case think better option control anchor function in controller's logic. set dom div , ng-click='yourfunction()' , in case post.slug exists navigation angular's routing system.