title: Find element not found in AngularJS
body: <p>I have component in AngularJS and a template which looks something like the following</p>
  
  <p><strong>Template</strong></p>
  
  <pre><code>&lt;div id="{{ $ctrl.idName }}"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And the component controller looks something like this</p>
  
  <p><strong>Component controller</strong></p>
  
  <pre><code>export class SomeCtrl {
  
      idName: string = "idName";
  
      constructor(public $element) {
  
      }
  
      $postLink(): void {
          const divElement = this.$element.find(`#${ this.idName }`);
          console.log(divElement); //divElement is undefined
      }
  }
  </code></pre>
  
  <p>For some reason <code>divElement</code> becomes undefined, however if I write the name in the template as following</p>
  
  <pre><code>&lt;div id="idName"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Then the element is found. My assumption that it was due to template hasn't finished compiling. But it seems not because of that either since the <code>$postLink()</code> method is fired when compiling is finished according to the following article <a href="https://blog.thoughtram.io/angularjs/2016/03/29/exploring-angular-1.5-lifecycle-hooks.html" rel="nofollow noreferrer">ThoughtRam - Exploring Angular 1.5: Lifecycle Hooks</a></p>