AngularJs Sort orderBy not working properly

Question

Please tell me whats wrong in my code. When you click on table headings $scope.sort is getting correct values, but its not sorting the table alphabetically.

You can view the plunkr here with JSON file: http://plnkr.co/edit/DYwbqDzBVTkQalhDtc6i?p=preview

View here to see CONSOLE LOG http://embed.plnkr.co/DYwbqDzBVTkQalhDtc6i/

var ssgaApp = angular.module('ssgaApp', []);

	ssgaApp.controller('mainCtrl',['$scope', '$http', function ($scope,$http) {
		var getEntries = $http.get('altLoginServlet.json');

		getEntries.success(function (data, status, headers, config) {
            $scope.ajaxerror = false;
            $scope.companies = data.data;
        });

        getEntries.error(function(data, status, headers, config) {
            $scope.ajaxerror = true;
        });


        $scope.sort  = {column: '', descending: true};
        $scope.changeSort = function(column) {
            // console.log($scope.sort);
            
            $scope.sort.column = column;
            $scope.sort.descending = !$scope.sort.descending;
            console.log('$scope.sort.column', $scope.sort.column, '$scope.sort.descending', $scope.sort.descending);

            $scope.currentPage = 1;
            $scope.currentPage_grid = 1;
        };

	}])
	.directive('changeSortdirective', ['$timeout', function($timeout) {

        return {
            restrict: 'A',
            scope: {
                changeSortAttr: '@changeSortdirective'
            },
            link: function (scope, element, attrs) {

                console.log('changeSortAttr', scope.changeSortAttr);

                element.on('click', function(){
                    console.log('changeSort bind', scope.changeSortAttr);

                    scope.$parent.changeSort(scope.changeSortAttr);

                });

            }
        };

    }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>



	<div ng-app="ssgaApp" ng-controller="mainCtrl">
		

		<table class="leftPadding">
  	        
  	        <thead>
  	            <tr>
  	                <th width="80%">
                    <a href="javascript:void(0)" change-sortdirective="companyName">Name <span></span></a>
                    </th>
  	                <th>
                    <a href="javascript:void(0)" change-sortdirective="id">ID <span></span></a>
                    </th>
  	            </tr>
  	        </thead>
  	        
  	        <tbody>
  	            <tr ng-repeat="comp in companies | orderBy:sort.column:sort.descending ">
  	                <td class="col1" ng-show="comp.companyName"><a href="javascript:void(0)" ng-click='toggleModal(comp.id)'>{{comp.companyName}}</a></td>
  	                <td class="col1" ng-show="comp.loginName">
                    <a ng-click="doAltLogin(comp.loginName)" href="javascript:void(0)">{{comp.lastName}}, {{comp.firstName}}</a></td>
  	                <td ng-bind="comp.id"></td>
  	            </tr>
  	        </tbody>
  	        
  	    </table>


	</div>

Answer 1

Because you use DOM's onclick event and not ngClick directive, Angular doesn't detect user's interactions.

You may need to refresh the $scope manually:

      element.on('click', function() {
        scope.$apply(function() {
          scope.$parent.changeSort(scope.changeSortAttr);
        });
      });