How to stop ng-model from overriding server side values

See more:

ASP.NET

WebForms

AngularJs

I have a asp.net webforms textbox in which I have loaded data form datatable on page load, it works fine but when I put ng-model in this, the textbox becomes blanks.
I need data from datatable as well as do some calculation in angular js .
<asp:TextBox ID="txtCp" CssClass="form-control" ng-model="cp" ng-change="ACP()" runat="server">

What I have tried:

if (!IsPostBack)
{
    try
    {
        DataTable dt2 = bllproduct.GetProductById(productId);
        if (dt2.Rows.Count > 0)
        {                   
            txtCp.Text = Convert.ToDouble(dt2.Rows[0]["CostPrice"]).ToString();
           
        }

Angular:

app.controller('ProductController', function ($scope) {
    $scope.vat=13;
    $scope.ACP = function () {
        $scope.acp = ($scope.cp - (-$scope.cp * ($scope.vat / 100)));
    }
    $scope.SP = function () {
        $scope.sp = ($scope.acp - (-$scope.acp * ($scope.margin / 100)));
    }
});

<asp:TextBox ID="txtCp" CssClass="form-control" ng-model="cp" ng-change="ACP()" runat="server">