title: AngularJS ngIf prevents finding element inside directive
body: <p>I have an AngularJS directive that includes an <code>ngIf</code> and I would like to modify some of the DOM inside the <code>ngIf</code> in the directive link function. Unfortunately it seems that <code>ngIf</code> prevents me from finding DOM elements within it in the link function.</p>
  
  <p>Here is the code for the directive:</p>
  
  <pre><code>directive('column', function () {
      return {
        templateUrl: 'views/column.html',
        restrict: 'E',
        scope: {
          column: '='
        },
        controller: ['$scope', function ($scope) {
  
          $scope.editing = true;
          $scope.toggleEditing = function () {
            $scope.editing = !$scope.editing;
          };
  
        }],
        link: function postLink(scope, element) {
          var select = element.find('select');
          console.log(select); // See if it can find the select element
          // var types = scope.column.types();
          // add types as options to the select element
        }
      };
    });
  </code></pre>
  
  <p>And here is the simplified html of the directive:</p>
  
  <pre><code>&lt;div class="column"&gt;
      &lt;div&gt;{{ column.title }}&lt;/div&gt;
      &lt;form name="columnForm" role="form" ng-if="editing"&gt;
          &lt;select&gt;&lt;/select&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the link to the jsFiddle example <a href="http://jsfiddle.net/dedalusj/Y49Xx/1/" rel="noreferrer">http://jsfiddle.net/dedalusj/Y49Xx/1/</a></p>
  
  <p>The <code>element.find</code> call in the link function returns an empty array but as soon as I remove the <code>ngIf</code> from the form it returns the proper select DOM element. I have the feeling that I'm doing this the wrong way.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Thanks for the answers but I found another solution. I simply created another directive that encapsulate the form, added it to the <code>column</code> directive template with <code>ng-if="editing"</code>. </p>
  
  <p>The form directive doesn't have it's own scope so it effectively operates out of the <code>column</code> directive scope and has always access to the <code>select</code> element because it's inside its DOM tree. I pay the cost of an extra directive but I don't have to use the <code>$timeout</code> hack. I created a new jsFiddle to illustrate the solution <a href="http://jsfiddle.net/dedalusj/nx3vX/1/" rel="noreferrer">http://jsfiddle.net/dedalusj/nx3vX/1/</a></p>
  
  <p>Thanks @Michael but I can't simply use the <code>ng-option</code> because the <code>types</code> array comes from an XML file and its elements are other angular.element objects which cannot be inserted easily with <code>ng-option</code>. </p>