sortable() not working with rows in ng-grid

Question

I'm trying to apply sortable to rows in the ng-grid. The rows are actually dragged but not dropped.
My code :

 <div class="gridStyle" ng-grid="gridOpt"></div>
    var app = angular.module("app", ['ngGrid']);
app.controller("ctrl", function($scope) {


    $scope.myData = [{name: "Brian", age: 29},
                     {name: "Doug", age: 25},
                     {name: "Bill", age: 27},
                     {name: "Amy", age: 29},
                     {name: "Bob", age: 34}];
    $scope.gridOpt = {
        data: 'myData',
        columnDefs: [
      { field: 'name', displayName: 'name', width: '64px' },
      { field: 'age', displayName: 'age' }
    ],
        rowTemplate:'<div id="id1" style="height: 100%" 
        ng-class="{green: row.getProperty(\'age\')  < 30}"> 
        <div ng-repeat="col in  renderedColumns" class="ngCell 
        col{{$index}}   {{col.cellClass}}" ng-cell></div></div>' };

 setTimeout(function () {
        $('#id1').parent().parent().attr('id', 'sortable');
        $('#sortable').sortable();
  }, 200);


});

I not getting why the rows in the ng-grid are not dropped after dragging.