Unable to get input field `value` assigned using javascript

Question

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?

Answer 1

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

• AngularJS ng-click Directive API Reference

Answer 2

It's is because of the usage of ng-model which uses two way binding.. Try to set the value on the controller scope variable which is form.removedSiblings.

hope this helps.