$scope variable not reloaded - angularjs

Question

In the controller I have the code below :
//View
<input type="text" value="{{customer.lastName}}" />
//Controller
$scope.getbycode = function (customerCode) {
var deferred = $q.defer(),
getCustomerRequest = {
code: customerCode
};
$http({ method: 'POST', url: 'api/customer/getbycode', data: getCustomerRequest })
.success(function (data) {
deferred.resolve(data);
}).error(function () {
deferred.reject();
});
return deferred.promise;
};
$scope.getbycode($routeParams.customerCode).then(function (data) {
$scope.customer = data.customer;
});
That's work, I see the lastname of Customer.
In the controller I have this code too. This function is called when I ckick on an hyperlink
$scope.reload = function (customerCode) {
$scope.getbycode(customerCode).then(function (data) {
$scope.customer = data.customer;
alert($scope.customer.lastName);
});
};
I change the text in the input and I click on the hyperlink.
The WEBAPI is called, the data returned in the reload function is correct but the view is not updated.
I missed something ?

Answer 1

value="{{customer.lastName}}" will only evaluate expression first time & then it replaces with customer.lastName value which is 1, DOM will look like below
<input type="text" value="1" />
Which had got rid off {{customer.lastName}} value, the changes in scope variable will never happen to that input field.
You should use ng-model there to have two way binding, that will update input & scope value once you update scope value.
<input type="text" ng-model="customer.lastName" />
Demo Plunkr