javascript - AngularJs Directive - <script> inside template -

i have directive template , inside template have <script> tag using variables of directive.

directive:

    (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;         }        }     })(); 

template:

    <div>       <div>         id: {{vm.inputid}}         <ng-transclude></ng-transclude>       </div>       <script>         console.log({{vm.inputid}});       </script>     </div> 

usage:

    <picker input-id="myinput"> <!-- something... --> </picker> 

the problem {{vm.inputid}} inside <script> tag isn't filtered {{vm.inputid}} doesnt become "myinput". works outside <script> tag, id: {{vm.inputid}} becomes id: myinput

is not possible put "variables" inside script tag?

well, jqlite not support script tags in templates. jquery does, recommendation include jquery if need functionality.

further,

even if use <script> tag in template, code within executed outside angular's context. not able access variable inside controller's scope in <script> tag within template file. means, doing like

  <script>     console.log({{vm.inputid}});   </script> 

is not possible, because neighter vm, nor inputid available , infact error claiming unexpected token {{

again, have written same code in controller anyways. why complicate things

if still intend use <script> within template, here's plunkr