execute javascript code in views
<p>I'm working with AngularJS, and I have an index page, in this page I have a <code>&lt;div ui-view&gt;&lt;/div&gt;</code>.
when I type some url for example <code>#/offers/new</code> I call a page e.g. <code>new-offer.html</code> which will be injected in the <code>ui-view</code>.</p>
<p>And I have a javascript code block which I call in the <code>index.html</code> page, in this javascript code I want to do some html handling and the html code I want to handle is in the `new-offer.html page.</p>
<p>so here is what happens, when I load <code>index.html</code> it executes the javascript code which doesn't find the html code to handle in the the index.html, and then when I call <code>#/offers/new</code> the <code>new-offer.html</code> will be injected and nothing will happen.</p>
<p>this is my index.html:</p>
<pre><code>&lt;!doctype html&gt;
&lt;html&gt;
...

  &lt;div ui-view&gt;&lt;/div&gt;

  ... Code
  ... Other scripts
&lt;script src=&quot;scripts/app.js&quot;&gt;&lt;/script&gt;
&lt;!--TEXT EDITOR JS--&gt;
 &lt;script src=&quot;scripts/js/editor.js&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;

&lt;/html&gt;
</code></pre>
<p>and this is <code>new-offer.html</code>:</p>
<pre><code>... Code
          &lt;div class=&quot;col-md-12&quot;&gt;
            &lt;div class=&quot;text-editor-box&quot;&gt;
              &lt;textarea class=&quot;txtEditor&quot;&gt;&lt;/textarea&gt;
            &lt;/div&gt;
          &lt;/div&gt;
... Code
</code></pre>
<p>and this is the script I call in the <code>index.html</code> and I want it to be executed when I call <code>#/offers/new</code> :</p>
<pre><code>//TEXT EDITOR
    if ($('.txtEditor').length) {
    $(&quot;.txtEditor&quot;).Editor();
    }
</code></pre>
<p>isn't there anyway to solve this without calling the javascript code inside the <code>new-offer.html</code> page ? I mean to not execute that javascript code until I inject the html code inside <code>new-offer.html</code> into <code>index.html</code>.</p>
<h1>Edit 1:</h1>
<p>I tried to use directives as following :</p>
<p>in app.js :</p>
<pre><code>.directive('textEditordir', function() {
  return {
    template: '&lt;div class=&quot;text-editor-box&quot;&gt;&lt;textarea class=&quot;txtEditor&quot;&gt;&lt;/textarea&gt;&lt;/div&gt;'
  };
});
</code></pre>
<p>and in <code>new-offer.html</code> :</p>
<pre><code>&lt;div text-editordir&gt;&lt;/div&gt;
</code></pre>
<p>but still, the javascript code didn't work</p>