title: Javascript inside script tag in an Angularjs template is not executed
body: <p>I have a simple directive that displays three images. On mouse hover, it should switch from black and white to normal image.
  Below given is the code inside the directive.</p>
  
  <pre><code>&lt;div class="container"&gt;
  
  &lt;div class="row"&gt;
          &lt;div class="col-md-4"&gt;
              &lt;h3&gt;
                  Example 1&lt;/h3&gt;
              &lt;div class="fd-fade1 fd-effect"&gt;
                  &lt;img src="http://i.imgur.com/yxAxCaK.jpg" class="fd-img1" alt=""&gt;
              &lt;/div&gt;
              &lt;!-- /.fd-fade --&gt;
          &lt;/div&gt;
          &lt;!-- /.col-md-4 --&gt;
          &lt;div class="col-md-4"&gt;
              &lt;h3&gt;
                  Example 2&lt;/h3&gt;
              &lt;div class="fd-fade2 fd-effect"&gt;
                  &lt;img src="http://i.imgur.com/jlattvQ.jpg" class="fd-img2" alt=""&gt;
              &lt;/div&gt;
              &lt;!-- /. fd-fade --&gt;
          &lt;/div&gt;
          &lt;!-- /.col-md-4 --&gt;
          &lt;div class="col-md-4"&gt;
              &lt;h3&gt;
                  Example 3&lt;/h3&gt;
              &lt;div class="fd-fade3 fd-effect"&gt;
                  &lt;img src="http://i.imgur.com/XqtS5WA.jpg" class="fd-img3" alt=""&gt;
              &lt;/div&gt;
              &lt;!-- /. fd-fade --&gt;
          &lt;/div&gt;
          &lt;!-- /.col-md-4 --&gt;
      &lt;/div&gt;
  &lt;script type="text/javascript"&gt;
   $(document).ready(function () {
             debugger;
              $('.fd-effect').hover(function () {
                      $(this).children("img").stop().fadeIn('slow');
                     // add .stop() to prevent event chaining
              }, function () {
                      $(this).children("img").stop().fadeOut("slow");
              });  // end .fd-effect
          });     // end document.ready function
  &lt;/script&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>The jQuery script for the hover is shown above (embedded inside the template).</p>
  
  <p>My problem!!!</p>
  
  <p>This code does not run inside an angularjs directive.Event the debugger does not get hit. 
  Could someone please help me understand why it does not run?</p>
  
  <p>P.S The code does run if not inside a directive.</p>
  
  <p>--edit.. </p>
  
  <p>Since the question is way too vague for many, let me clarify.</p>
  
  <p>I have a simple angular directive , that uses a template . This template contains html and inline javascript to render out 3 images .</p>
  
  <p>The directive : </p>
  
  <pre><code>var app = angular.module('albumApp', []);
  app.directive('album', function ($log) {
      return {
          restrict: 'E',
          templateUrl: 'templates/default.htm',
          replace: true
  };
  }
  </code></pre>
  
  <p>This is all that I have .The html is the one present in the default.htm</p>
  
  <p>In the main html page, </p>
  
  <p>I just write   and I expect the html to be rendered and jQuery to perform like normal.</p>
  
  <pre><code>&lt;html ng-app="albumApp"&gt;
     &lt;head&gt;
       &lt;title&gt;Test&lt;/title&gt;
     &lt;head&gt;
     &lt;body&gt;
        &lt;album /&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Do note: The the directive works and the template gets rendered. But the script inside the template is not functioning. My doubt is why!</p>