title: ngIf once with angular
body: <p>I'm using tabs on a Angular app, using ngIf to lazy load the directives and controls inside them when the users needs to. The problem is that I don't want to recreate the tab if the users navigate through them, and with that in mind I'm using this <em>trick</em> to initialize the tab just once and show it when then users needed:</p>
  
  <pre><code>&lt;button ng-click="tab.show=!tab.show"&gt;Toggle tab&lt;/div&gt;
  
  &lt;div ng-if="tab.show || tab.initialized" ng-show="tab.show" ng-init="tab.initialized=true"&gt;
  tab content
  &lt;/div&gt;
  </code></pre>
  
  <p>What I want to achieve is implement this behaviour with a custom directive, something like <code>ng-if-once="tab.show"</code>, reusing the core ngIf and ngShow directives if possible. Any ideas?</p>
  
  <p><em>EDIT</em></p>
  
  <p>This is my temporal solution, but ngIf keeps working after a truthy value is set:</p>
  
  <pre><code>app.directive('ngIfOnce', ['ngIfDirective', 'ngShowDirective', function (ngIfDirective, ngShowDirective) {
  var ngIf = ngIfDirective[0];
  var ngShow = ngShowDirective[0];
  
  return {
      transclude: ngIf.transclude,
      priority: ngIf.priority,
      terminal: ngIf.terminal,
      restrict: ngIf.restrict,
      link: function ($scope, $element, $attr) {
          $attr.ngIf = $attr.ngShow = $attr['ngIfOnce'];
  
          var unregisterWatcher = $scope.$watch($attr.ngIf, function (newVal) {
              if (newVal) {
                  $attr.ngIf = true;
                  unregisterWatcher();
              }
          });
  
          ngIf.link.apply(ngIf, arguments);
          ngShow.link.apply(ngShow, arguments);
      }
  };
  }]);
  </code></pre>