title: Weird ngIf + $compile behavior
body: <p>I'm trying to build a directive that would do the following:</p>
  
  <ul>
  <li>add another directive to the element (ngSwipeRight for example)</li>
  <li>add some custom behavior to the new directive.</li>
  </ul>
  
  <p>An example would be: <code>mySwipeBack</code> that would add <code>ngSwipeRight</code> and when the user swipes over the element I would do <code>history.back()</code>.</p>
  
  <p>I tried like this: </p>
  
  <pre><code>.directive('swipe', function($compile){
    return {
      restrict: 'A',
      compile: function(el){
          // I removed all the actual logic for demo purposes
          // here I would add ng-swipe-right plus a handler
          el.removeAttr('swipe');
          var fn = $compile(el);
          return function (scope) {
            fn(scope);
          };
     }
   }
  });
  </code></pre>
  
  <p>But I ran into an issue with the following markup:</p>
  
  <pre><code>&lt;div ng-if='true'&gt;
    &lt;h1 swipe&gt;OUTSIDE
      &lt;div ng-if="true"&gt;INSIDE&lt;/div&gt;
    &lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The "INSIDE" text doesn't get rendered.
  You can see the behavior in this jsbin: <a href="http://jsbin.com/tokofevuga/edit?html,js,output" rel="noreferrer">http://jsbin.com/tokofevuga/edit?html,js,output</a></p>
  
  <p>If I remove the first ng-if, it works as intended.</p>
  
  <p>Does anyone know what the reason is behind this - and if I can make it work?</p>
  
  <p>Or if someone has another idea of how to achieve what I described above?</p>