title: AngularJs Directive - <script> inside template
body: <p>I have a directive with a template and inside this template I have a <code>&lt;script&gt;</code> tag using variables of the directive.</p>
  
  <p>Directive:</p>
  
  <pre><code>    (function () {
        'use strict';
  
        angular
          .module('app.components')
          .directive('picker', Picker);
  
        /*@ngInject*/
        function Picker() {
  
          return {
            restrict: 'E',
            controller: PickerController,
            controllerAs: 'vm',
            bindToController: true,
            templateUrl: 'picker.html',
            transclude: true,
            scope:{
              inputId: '@'
            }
          };
  
          /*@ngInject*/
          function PickerController() {
            /*jshint validthis: true */
            var vm = this;
          }
  
        }
      })();
  </code></pre>
  
  <p>Template:</p>
  
  <pre><code>    &lt;div&gt;
        &lt;div&gt;
          id: {{vm.inputId}}
          &lt;ng-transclude&gt;&lt;/ng-transclude&gt;
        &lt;/div&gt;
        &lt;script&gt;
          console.log({{vm.inputId}});
        &lt;/script&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Usage:</p>
  
  <pre><code>    &lt;picker input-id="myInput"&gt; &lt;!-- something... --&gt; &lt;/picker&gt;
  </code></pre>
  
  <p>The problem is that the {{vm.inputId}} inside the <code>&lt;script&gt;</code> tag isn't filtered so {{vm.inputId}} doesnt become "myInput". Everything works outside the <code>&lt;script&gt;</code> tag, <code>id: {{vm.inputId}}</code> becomes <code>id: myInput</code></p>
  
  <p>Is it just not possible to put "variables" inside a script tag?</p>