title: How to apply directive conditionally in AngularJS?
body: <p>I want to apply a simple directive conditionally using <strong>ngAttr</strong>. I don't understand why my directive is always displayed. So if I have an <strong>undefined / false</strong> variable I want to apply my directive: <strong>dirr</strong>.  </p>
  
  <blockquote>
    <p>When using <strong>ngAttr</strong>, the <strong>allOrNothing</strong> flag of <strong>$interpolate</strong>  is used, so if any expression in the interpolated string results in <strong>undefined</strong>, the attribute is removed and not added to the element.</p>
  </blockquote>
  
  <p><a href="http://codepen.io/ptongalex/pen/YqKNpP" rel="noreferrer">My code pen</a></p>
  
  <pre><code>&lt;div ng-app="myApp" ng-controller="MainController" class="container-fluid"&gt;
      &lt;h2 ng-bind="currentVersion"&gt;&lt;/h2&gt;
      &lt;hr&gt;
      &lt;div ng-attr-dirr="hidden || undefined"&gt;Default div&lt;/div&gt;
  &lt;/div&gt;
  
  angular.module('myApp',[])
   .directive('dirr', function(){
     return {
       restrict:'AE',
       template:'&lt;div&gt;Div from directive&lt;/div&gt;'
     }
   })
   .controller('MainController',['$scope', function($scope){
     $scope.currentVersion = 'Angular 1.3.6';
     $scope.hidden = undefined;
   }])
  ; 
  </code></pre>