Data Table with Angularjs

I am using angularjs with MVC5 (.net) for creating single page website. I have problem to bind data with "data table(jquery)"

When first time bind data in to table at that time it's work fine but when i edit the record and rebind the data with data table at that time getting issue.

my code like bellow:

HTML

<table id="dt_Tarnsaction_Lunch" class="notinit">
    <thead>
        <tr>
            <th >Employee Id</th>
            <th >Edit</th>
        </tr>
    </thead>
    <tbody id="TLunch">
        <tr ng-repeat="TableRow in DashTranTableRows}" on-finish-tranlunch>
            <td>{{TableRow.trancol_emplid}}</td>
            <td >
                <button ng-click="EditRecord(TableRow.trancol_dailytranspk)">
                Edit
                </button>
            </td>
        </tr>
    </tbody>
</table>

"on-finish-tranlunch" Directive Code

appRoot.directive('onFinishTranlunch', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$emit('ngRepeatTranlunchFinished');
                });
            }
        }
    }
});

My Code In Controller

 $scope.LoadData();
    var OTransLunchTable;
    $scope.$on('ngRepeatTranlunchFinished', function (ngRepeatTranlunchFinishedEvent)
    {
        if (!null)
        {
            if ($("#dt_Tarnsaction_Lunch").hasClass("init"))
            {
                OTransLunchTable.fnDraw();
            }
            else
            {
                $("#dt_Tarnsaction_Lunch").removeClass("notinit");
                $("#dt_Tarnsaction_Lunch").addClass("init");
                OTransLunchTable = $('#dt_Tarnsaction_Lunch').dataTable({
                    "sPaginationType": "bootstrap",
                    "sDom": "R<'dt-top-row'Clf>r<'dt-wrapper't><'dt-row dt-bottom-row'<'row'<'col-sm-6'i><'col-sm-6 text-right'p>>",
                    "fnInitComplete": function (oSettings, json) {
                        $('.ColVis_Button').addClass('btn btn-default btn-sm').html('Columns <i class="icon-arrow-down"></i>');
                    }
                });
            }
            $('#dt_Tarnsaction_Lunch').width('100%');
        }
        else
        {
            $(".loading").hide();
            alert("Error - Data can not be load");

        }
    });

My Code In Controller for load data first time as well as after edit record(both time i am using same method)

$scope.LoadData = function () 
{
        myResource.getDashTableRows().then(function (d)
        {
        $scope.DashTranTableRows = d.data;
        },
        function (error) {
            $(".loading").hide();
            window.location = "login";
        });
}

So, finally data loaded first time well and data table works fine at the first time but When i am edit record and load updated data at that time data table not loaded with updated data and also edit button not works.. :(

My JSON Format like bellow

[
    {
        "trancol_emplid": "a1",
        "trancol_dailytranspk": 1
    },
    {
        "trancol_emplid": "a2",
        "trancol_dailytranspk": 2
    },
    {
        "trancol_emplid": "a3",
        "trancol_dailytranspk": 3
    },
    {
        "trancol_emplid": "a4",
        "trancol_dailytranspk": 4
    },
    {
        "trancol_emplid": "a5",
        "trancol_dailytranspk": 5
    },
    {
        "trancol_emplid": "a6",
        "trancol_dailytranspk": 6
    }
]

My Service factory for load data from Server

angular.module('GratSyncSite').factory('myResource', function ($http)
 {
    var myResource = 
    {
        getDashTableRows: function ()
            {
            $(".loading").show();
                    var promise = $http.get(WEBRESOURCEURL).success(function (response)
                    {
                            return response;
                    });
                    return promise;
            }
    }
});