Q:

AngularJs Sort orderBy not working properly

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>

A:

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);
        });
      });

