Editable text not working in Angular js - angularjs

Question

Using angular js on click of text, text should be editable. Currently not working. Used this library. Following code is in view page.
JS:
var app = angular.module('virVenturesAPP', ['angularUtils.directives.dirPagination','720kb.datepicker','xeditable']);//'720kb.datepicker'
var site_url = 'http://localhost/vv/';
app.run(function(editableOptions) {
editableOptions.theme = 'bs3';
});
HTML:
<table id="table_id" class="table table-striped table-hover table-bordered" ng-show="numberLoad">
<thead>
<tr>
<th>#</th>
<th>RRD Track No</th>
<th>Order Primary Key</th>
<th>Order Id</th>
<th>Mapped Date</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="rrd in getRrdList | itemsPerPage:rrdinfo.itemsPerPage" current-page="rrdinfo.currentPage" total-items="total_count">
<td>{{rrd.id}}</td>
<td>{{rrd.rrd_track_no}}</td>
<td >{{rrd.ord_primary_key}}</td>
<!-- <td editable-text="rrd.order_id" ng-if="rrd.order_id==='' "> <p contenteditable="true"> enter order</p></td>-->
<td ng-if="rrd.order_id==='' "> <a data-title="Enter username" editable-text="rrd.order_id" data-pk="1" data-type="text" id="usernameaa" href="#" class="editable editable-click edit_text" data-original-title="" title="">enter order id</a></td>
<td ng-if="rrd.order_id!=='' ">{{rrd.order_id}}</td>
<td>{{rrd.mapped_date}}</td>
</tr>
</tbody>
</table>

Answer 1

I removed the following code:
ng-show="numberLoad" line 2
ng-if="rrd.order_id==='' " line 18
['angularUtils.directives.dirPagination','720kb.datepicker'] I think this line of code is the real problem
and it works:
jsfiddle
try to investigate better
<div ng-app="virVenturesAPP" ng-controller="Ctrl">
<table id="table_id" class="table table-striped table-hover table-bordered" >
<thead>
<tr>
<th>#</th>
<th>RRD Track No</th>
<th>Order Primary Key</th>
<th>Order Id</th>
<th>Mapped Date</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="rrd in getRrdList | itemsPerPage:rrdinfo.itemsPerPage" current-page="rrdinfo.currentPage" total-items="total_count">
<td>{{rrd.id}}</td>
<td>{{rrd.rrd_track_no}}</td>
<td >{{rrd.ord_primary_key}}</td>
<!-- <td editable-text="rrd.order_id" ng-if="rrd.order_id==='' "> <p contenteditable="true"> enter order</p></td>-->
<td > <a data-title="Enter username" editable-text="rrd.order_id" data-pk="1" data-type="text" id="usernameaa" href="#" class="editable editable-click edit_text" data-original-title="" title="">enter order id</a></td>
<td ng-if="rrd.order_id!=='' ">{{rrd.order_id}}</td>
<td>{{rrd.mapped_date}}</td>
</tr>
</tbody>
</table>
</div>
//script
var app = angular.module('virVenturesAPP', ['xeditable']);
app.run(function(editableOptions) {
editableOptions.theme = 'bs3';
});
app.controller('Ctrl', function($scope) {
$scope.rrd = {
order_id: 'awesome user'
};
});