AngularJS : How to bind data to a Directive?

Question

I have a problem with this:

app.directive('myDirective', function(){
    return{
        retrict: 'EA',
        replace: false,
        scope:{
            fstData: '@',
            sndData: '@'
        },
        template: '<div ng-controller="myController" arg="{{fstData}}"><h3>{{sndData}}</h3><li ng-repeat="event in eventsCat"></li></div>' 
    }
});

When I create a my-directive tag in the HTML, it doesn't bind fstData but if I delete {{fstData}}, and I put something, it works.

I think that I can't binding in a tag that contains a ng-controller attribute, but I need this attribute (args) because in myController I use it.

Thanks!

In myController I have this:

app.controller('myController', function($scope, $attrs){
var myVar = myArray[$attrs.arg];

Answer 1

Have you tried this approach?

app.directive('myDirective', function(){
    return{
            retrict: 'EA',
            replace: false,
            scope:{
                fstData: '@',
                sndData: '@'
                },
            link: function(scope ,element , attrs) 
            {
               var markup =  '<div ng-controller="myController" arg="'+scope.fstData+'"><h3>'+scope.sndData+'</h3><li ng-repeat="event in eventsCat"></li></div>' ;
               element.append(markup);
            }
    }
});