ng-click in the directive doesn't work

Question

I want to execute a function when clicking on a checkbox but nothing happens.

When I put the sendMediaToScreen function in the link ( scope.sendMediaToScreen() ), the function works, so it's OK with the scope .

.directive('uxEmbedVideo', ['$compile','myURL', function( $compile, myURL ) {
    return {
        restrict: "E",
        replace: true,
        scope: {
            'clientId': '@',
            'sendMediaToScreen': '&',
            'rule': '=',
            'screenActivated' : '='
        },
        link: function( scope, element, attrs ){
        },
        templateUrl: myURL.getAppViewsPath() + '/partials/embed-video.html'
    };
}])

Directive

<ux-embed-video
    rule="user.rules"
    screen-activated="room.parameters.screenActivated"
    send-media-to-screen="roomManager.sendMediaToScreen({ clientId : user.clientId, from: 'producer' })">
</ux-embed-video>

/partials/embed-video.html

<div class="ux-video-admin-controls" ng-if="rule === 'administrator'" >
    <input ng-if="screenActivated"
       restrict access="administrator"
       class="ux-admin-videoToScreen"
       type="checkbox"
       ng-click="sendMediaToScreen()"
       />
</div>

Answer 1

The Problem lies within the usage of your <ux-embed-video> directive.

You are binding the result of roomManager.sendMediaToScreen({ clientId : user.clientId, from: 'producer' }) to scope.send-media-to-screen instead of passing in a callback.

Answer 2

I don't know why but replacing the template directive like this, now it works

in the directive :

remove -> replace: true,

in the template

<div class="ux-video-admin-controls" ng-if="rule === 'administrator' && screenActivated" >
    <input
       restrict access="administrator"
       class="ux-admin-videoToScreen"
       type="checkbox"
       ng-click="sendMediaToScreen()"
       />
</div>

Thank you