click handler not called in angular custom directive while using ng-repaet

I have created a directive in angular, the template of the directive uses ng-repeat and inside the template there is a button which is having a click handler assigned to it using ng-click.

.directive('webEvent',function(){
 return{
    restrict:'E',
    replace: true,
    scope: {
        events: "="
    },
    template:"<div class='row' ng-repeat='event in events'>"+
                "<div class='col-md-8'>"+
                    "<p class='evTitle'>{{event.eventName}} @ {{event.eventPlace}} on {{event.eventDate}}</p>"+
                    "<p class='evLength'>You have {{event.eventLength}} events scheduled on this date</p>"+
                "</div>"+
                "<div class='col-md-4'><button type='button' class='btn btn-success pull-right' ng-show='event.expressIntrest' ng-click='expressIntrestClick($index)'>Express Intrest</button></div>"+
              "</div>",
    link:function(scope, elem, attrs){

         scope.expressIntrestClick=function(index){
         console.log("hello");
       }


        }
     } 

});

The problem I am facing is the click handler for the button is not getting called.

When I created a similar directive without the ng-repeat the click handler is getting called. I have created plunks for both the directive. What should I do so that the click handler gets invoked while using ng-repeat?

directive without ng-repeat

directive with ng-repeat