ng-click doesn't work inside a script balise

Question

i have this code

HTLM:

<script type="text/ng-template" id="custom-footer">
<div>
    <table cellspacing="0" cellpadding="0" ng-controller="SearchController"
           style="border:solid 1px black; font-family:verdana; font-size:12px;">
        <thead>
        <tr style="background-color:lightgrey;">
            <th style="width:20px;" ng-click="changeTime(0)">Journée</th>
            <th style="width:20px;" ng-click="changeTime(1)">Matin</th>
            <th style="width:20px;" ng-click="changeTime(2)">Midi</th>
            <th style="width:20px;" ng-click="changeTime(3)">Soir</th>
        </tr>
        </thead>
    </table>
</div>
</script>
 <div class="ui-datepicker-calendar columns small-3">
     <input type="text" ng-model="goDate" ng-click="updateDatePicker()"
     placeholder="Date d'aller" datepicker/>
 </div>

My directive:

(function () {
    var mod = angular.module('matrixarCalendar', []);

    mod.directive('datepicker', function () {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function (scope, elem, attrs, ngModelCtrl) {
                var updateModel = function (dateText) {
                    // call $apply to bring stuff to angular model
                    scope.$apply(function () {
                        ngModelCtrl.$setViewValue(dateText);
                    });

                };

                scope.updateDatePicker = function () {
                    $.datepicker.dpDiv.append($('#custom-footer').contents().text());
                };
                var options = {
                    dateFormat: 'dd/mm/yy',
                    numberOfMonths: 2,
                    autoSize: true,
                    autoclose: true,
                    minDate: new Date(),
                    onSelect: function (dateText) {
                        updateModel(dateText);
                    }
                };
                elem.datepicker(options);
            }
        };
    });
}());

The Controller:

    angular.module('matrixarSearch', [
        'mm.foundation',
        'matrixarAutocomplete',
        'matrixarCalendar'
    ]).controller('SearchController', function ($scope, $translate) {

$scope.time='';

      $scope.changeTime = function(val){
            $scope.time = val;
            console.log($scope);
        };
    ...

But when i click on my header the scope is not init with the good value, why ?

Answer 1

decleare a scope (in SearchController) function, let's say:

$scope.changeTime = function(val) {
    $scope.time = val;
}

and for each header change the use:

<th style="width:20px;" ng-click="changeTime('0')">Journée</th>

Edit:

The main problem is that the table does not compiled when it appended with jQuery.

Need to use the $compile service to compile the sources and the relvant controller