DevExpress grid sorting

<!DOCTYPE html>
<html data-ng-app="demo">

<head>
  <script data-require="jquery@*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script data-require="angular.js@1.3.14" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
  <script data-require="angular-sanitize@1.3.14" data-semver="1.3.14" src="https://code.angularjs.org/1.3.14/angular-sanitize.js"></script>
  <script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.js"></script>
  <script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
  <script src="http://cdn3.devexpress.com/jslib/16.1.7/js/dx.all.js"></script>
  <link href="http://cdn3.devexpress.com/jslib/16.1.7/css/dx.common.css" rel="stylesheet" />
  <link href="http://cdn3.devexpress.com/jslib/16.1.7/css/dx.light.css" rel="stylesheet" id="theme-styles" />
  <link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div data-ng-controller="demo">
    <div class="container-fluid">
      <div class="row ">
        <div class="col-sm-12 example ">
          <div data-dx-data-grid="gridOptions" dx-item-alias="item">
              <div data-options="dxTemplate: { name: 'groupTemplate' }">
                    <mydir group-data = $parent.groups val= item ></mydir>
               </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

// Code goes here

angular.module('demo', ['dx', 'ui.bootstrap'])
.directive('mydir', function () {
  var directive = {};
  directive.scope = {
    val: '=',
    groupData: '='
  };
  directive.restrict = 'E';
  directive.link = function(scope, element, attr) {
    var options = scope.val;
    if(!scope.groupData)
      return;
    var newText =  options.column.caption + ": " +  scope.groupData[options.text.split('>>')[1]].label
    scope.val.newText = newText;
  };
  directive.template = "<div>test directive text val is {{ val.newText }}</div>";
  return directive;
})
  .controller('demo', ['$scope', '$compile', demoController]);

function demoController($scope, $compile) {
  $scope.data = [{
    id: 0,
    group: 0,
    name: 'Zero',
    description: 'I am the number 0'
  }, {
    id: 1,
    group: 0,
    name: 'One',
    description: 'I am the number 1'
  }, {
    id: 2,
    group: 0,
    name: 'Two',
    description: 'I am the number 2'
  }, {
    id: 3,
    group: 1,
    name: 'Three',
    description: 'I am the number 3'
  }, {
    id: 4,
    group: 1,
    name: 'Four',
    description: 'I am the number 4'
  }, {
    id: 5,
    group: 1,
    name: 'Five',
    description: 'I am the number 5'
  }];

  $scope.groups = [{
    id: 0,
    ordinal: 1,
    label: 'should be second'
  }, {
    id: 1,
    ordinal: 0,
    label: 'should be first'
  }];

  $scope.gridOptions = {
    bindingOptions: {
      dataSource: 'data'
    },
    columns: [{
      caption: 'Group',
      dataType: 'string',
      groupIndex: 0,
      dataField: 'group',
      calculateSortValue: calculateGroupSortValue,
      groupCellTemplate: "groupTemplate",
    //  function(container, options){
       // container.text(options.column.caption + ": " +  $scope.groups[options.text.split('>>')[1]].label);
       
  //    },
      calculateGroupValue: function(data){
        var sortValue = calculateGroupSortValue(data).toString();
        if(sortValue.length < 5){
           //add leading zeros
        }
        return sortValue + ">>" + data.group;
      },
      lookup: {
        displayExpr: 'label',
        valueExpr: 'id',
        dataSource: $scope.groups
      },
      sortIndex: 1,
      sortOrder: 'asc'
    }, {
      caption: 'Value',
      dataField: 'name',
      dataType: 'string',
      allowHiding: false,
      calculateSortValue: calculateSortValue,
     
      sortIndex: 2,
      sortOrder: 'asc'
    }, {
      caption: 'Description',
      dataField: 'description',
      dataType: 'string',
      allowHeaderFiltering: false,
      allowSorting: false
    }],
    filterRow: {
      visible: true
    },
    headerFilter: {
      visible: true
    },
    sorting: {
      mode: 'none'
    },
    columnAutoWidth: true,
    rowAlternationEnabled: true,
    hoverStateEnabled: true,
    showRowLines: true,
    showBorders: true,
  };

  function calculateSortValue(rowData) {
   
    return rowData.id;
  }

  function calculateGroupSortValue(rowData) {
    
    return $scope.groups[rowData.group].ordinal;
  }
}

/* Styles go here */

/* this is the bootstrap recommended CSS
* body {
*  padding-top: 70px;
* }
*/

.example {
  margin-top: 70px;
}