Changing ng-model value in controller is not displayed in html input

Issue

I have an HTML input that is assigned to an ng-model value, before any manual change in input, all the changes of ng-model in the controller (pragmatically) are displayed in HTML input but if I write anything in input manually, no change in controller be effected on displayed input on-page.

I write $scope.$apply() but it is not worked. also changing vieweValue of input by calling $setVieweValue doesn't have any effect on input element value. when I debug, I find out that the reason is that the DOM value of the element is unchangeable (changing ng-model value doesn't change input value) because when I change the value of the DOM element of input in chrome console, then the value becomes displayed in the page.

Solution

Try putting your model inside an object. eg- Suppose your scope variable is:

$scope.inputValue = "someValue";

and you are binding it as:

ng-model="inputValue";

Change it like this:

$scope.ob = {inputValue: "someValue"};

and in html:

ng-model="ob.inputValue";

Answered By - Akash Bhardwaj