Search code examples
javascriptangularjsangularjs-ng-model

Unable to get input field `value` assigned using javascript

I am using Laravel with Angular JS for forms. I got a text box in the form as below

<input type="text" name="removedSiblings" ng-model="form.removedSiblings"
       id="div_removedSiblings" class="form-control">

Using Javascript I am assigning a value (a button click)

var elem = document.getElementById('div_removedSiblings');
elem.value = 'malai';

Got the below code inside the Controller PHP

$removedSiblings = \Input::get('removedSiblings');
logger($removedSiblings);

I always get null value for $removedSiblings variable whenever the field gets value using the javascript.

But, when I type a value manually inside the text box, then that value is printed inside the controller.

Whats wrong here?

Solution

  • The AngularJS framework does not watch the value property of <input> elements. It only updates the model after user input or an update from inside the framework.

    Use the ng-click directive for the button:

    <button ng-click="form.removedSiblings = 'malai'">
    Click me
</button>

    For more information, see