Directive with transclude, data binding not working in templateUrl

Question

I have a directive with transclude:true. However, the data binding works when i use a template:"" but not when i use templateUrl:""

Below you can find my directive. The rsCarousel.html template contains the same code as the template"" property.

When using the template property i get the vm.carouselId on screen but not when using the templateUrl property.

Why is this?

Thx,

(function () {

    'use strict';

    angular.module('skynetDashboard').directive('rsCarouseli', carouseli);

    function carouseli(){

        var directive = {

            restrict:"EA",
            scope:{
                carouselData:"=",
                carouselId:"@",
                carouselOptions:"@"
            },
            transclude:true,
            templateUrl:"js/directive/rsCarousel.html",
            //template:"<strong>ID: {{vm.carouselId}}</strong><ul ng-transclude></ul>",
            bindToController:true,
            controllerAs:"vm",
            link:link,
            controller:controller

        }

        return directive

        function link(scope){

            console.log(scope.vm)

        }

        controller.$inject = [""]

        function controller(){



        }


    }

})();

Answer 1

That is strange, scope binding should work in both cases.

Be sure that your template file is not cached by the browser (and using an old version of it).