How to prevent that a scope is shared among directives n Angular?

Each instance of your directive needs to have its own caption, sort type, and reverse property. So the directive will need its own (child) scope — either an isolate scope (scope: {}) or a new scope (scope: true). Since the directive is not a standalone/self-contained component, I would not use an isolate scope (see also When writing a directive in AngularJS, how do I decide if I need no new scope, a new child scope, or a new isolated scope?).

With the type of scope selected for the directive, the sort type and reverse values can be passed to the parent via function arguments, or they can be set on parent scope directly. I suggest function arguments:

app.directive('headerSort', function () { return { scope: true, // creates a new child scope link: function (scope, element, attrs) { scope.caption = attrs.caption; scope.sortType = attrs.headerSort; scope.reverse = false; }, template: '<div data-ng-click="reverse=!reverse; doSort(sortType, reverse);">' + '{{caption}}</div>' }; }); 

function MyCtrl($scope) { $scope.orderField = "FirstName"; $scope.reverse = false; $scope.customers = [ {FirstName: 'Martijn', Age: 22}, {FirstName: 'Mark', Age: 44}]; $scope.doSort = function (sortType, reverse) { console.log('sorting',sortType, reverse); $scope.orderField = sortType; $scope.reverse = reverse; }; } 

<table> <th data-header-sort="FirstName" data-caption="First name"></th> <th data-header-sort="Age" data-caption="Age"></th> <tbody id="customerRows" data-ng-repeat="customer in customers | orderBy:orderField:reverse"> <tr><td>{{customer.FirstName}}<td>{{customer.Age}} </tbody> </table> 

fiddle In the fiddle, just for simplicity, I did not include the FullName column.