dom - If directive should not be loaded by some conditional? -

i have 1 directive dont want loaded.

<div class="col-sm-12 panel panel-default" ng-if="displayname=='automatic'">     <div automatic-dir opt='opt'></div> </div> 

i tried ng-if, ng-show ok not showed, both of them directive loaded.

if don't want change dom structure 1 of possible way this or in 1 of simplest way

<ul ng-controller="listviewctrl" >    <li ng-repeat="item in items">       <span>{{item.name}}</span>       <div automatic-dir opt='opt' ng-if="item.hasmenu"></div>    </li> </ul> 

if driving automatic-dir of class, should able this:

<ul ng-controller="listviewctrl" >    <li ng-class="{'hasmenu': item.hasmenu}" ng-repeat="item in items">{{item.name}} </li> </ul> 

could please tell exact problem facing done ng-if ? plunker added advantage resolved quickly.

you can resolve either building directive default and/or conditional behaviour desired things putting logic in link or controller of directive definition or can put condition in previous dom element ng-if of directive. please note later way not amongst best practices of angular.