[AngularJS] Custom directive not changing ng-style

I'm an Angular newbie, and I'm trying to add an event listener to change the class on an element. 

html: 

<div class='group' 

ng-class='{ active : isSelected }' 

ng-repeat='group in categories' categories>

{{ group.name }}

<span class='expand-icon'></span>

</div>

JS

demoApp.directive('categories',function() {

return {

restrict: 'A',

controller: 'libraryCtrl',

scope:true,

link: function(scope, element, attrs) {

element.bind('click', function () {

scope.isSelected = true;

console.log(scope.isSelected);

});

}

}

})

Desired Output: add class "active" to the element on click event. 

Not sure what's happening, the console outputs "true" which makes me thing there's something wrong with the scope, but I experimented it with it with no success. What am I doing wrong?

tried a scope.$apply() after changing the scope.isSelected to true?