Angular don't sorting data

Question

I try to sort data with angular. Here my code:

<table id="data-table" width="100%" class="table table-striped table-hover">
            <thead>
              <tr>
                <th class="sortable" field="name">Name</th>
                <th class="sortable" field="phone">Phone number</th>
              </tr>
            </thead>

            <tbody>
              <tr class="tr-data" ng-repeat="el in list | orderBy:sortCol:sortType" >
                <td>{{el.name}}</td>
                <td>{{el.phone}}</td>
              </tr>
            </tbody>


   </table>
<div>{{sortType}}</div>
<div>{{sortCol}}</div>

javascript:

var someData = [
  {'name': 'Vasja',    'phone': '00375 29 654 1185'},
  {'name': 'Sasha',   'phone': '00375 29 654 1176'}];
app.controller('myCtrl', function($scope) 
{
    $scope.sortType = false;
    $scope.sortCol = 'phone';
    $scope.list = someData;

  $scope.applySort = function()
  {
    $('th.sortable').each(function(idx, el) 
    {
      var uarr = $('<span class="sort-span" ng-click="xSort(this);">↑</span>');
      var darr = $('<span class="sort-span">↓</span>');
      uarr.appendTo(el).on('click', function() { $scope.sortCol = $(el).attr('field'); $scope.sortType = false;});
      darr.appendTo(el).on('click', function() { $scope.sortCol = $(el).attr('field'); $scope.sortType = true;});
    });
  };

  $scope.applySort();

});

By clicking on arrow - nothing changed. Even data sortCol and SortType don't changed. But, when i change data in list - sorting is applying;

Answer 1

Don't use jQuery, it should be done with Angular directives like ngClick:

<thead>
  <tr>
    <th class="sortable" field="name">
        Name
        <span class="sort-span" ng-click="sort('name', false)">↑</span>
        <span class="sort-span" ng-click="sort('name', true)">↓</span>
    </th>
    <th class="sortable" field="phone">
        Phone number
        <span class="sort-span" ng-click="sort('phone', false)">↑</span>
        <span class="sort-span" ng-click="sort('phone', true)">↓</span>
    </th>
  </tr>
</thead>

and controller:

app.controller('myCtrl', function ($scope) {

    $scope.sortType = false;
    $scope.sortCol = 'phone';
    $scope.list = someData;

    $scope.sort = function (field, type) {
        $scope.sortCol  = field;
        $scope.sortType = type;
    };

});

Answer 2

Angular couldn't fire it's events by jquery events. Either you could add $scope.$apply() to the end of your jquery events, it would work but this isn't a good solution.

The better way is to render your arrows in angular and bind events with angular.