AngularJS - why is the ng-click handler not being fired? -

here's html:

    <tr data-ng-repeat="a in assignments" data-ng-click="vm.handleassignmentclicked()">         ...     </tr> 

here associated directive , controller:

angular     .module('app.assignments')     .directive('stfrassignments', assignmentsdirective)     .controller('assignmentscontroller', assignmentscontroller);  function assignmentsdirective() {     var directive = {         restrict: 'e',         templateurl: 'components/assignments/assignments.html',         scope: {             assignments: '='         },         controller: 'assignmentscontroller',         controlleras: 'vm'     };     return directive; }  function assignmentscontroller() {     var vm = this;      function handleassignmentclicked() {         console.log('handleassignmentclicked');     } } 

when click assignment (a row in table), handleassignmentclicked() function not being called. should problem?

update: pointed out comment, parent directive (which supposed being used) using controlleras syntax, addressed in second point [2]. leave first 1 information.

[1] this keyword in controller not same $scope, unless use contoller controllername syntax.

you can inject $scope in controller:

function assignmentscontroller($scope) {   $scope.handleassignmentclicked() {     console.log('handleassignmentclicked');   } } 

[2] or alternatively, case:

<div ng-controller="assignmentscontroller assignctrl"> ...   <tr data-ng-repeat="a in assignctrl.assignments" data-ng-click="assignctrl.handleassignmentclicked()"> 

and in controller use this make function accessible:

this.handleassignmentclicked = function() { ... }