AngularJS - update bind ng-model input value from Jquery Code

By Hardik Savani | September 27, 2016 | Category : Javascript jQuery Angular

Sometimes, we require to set value of input box from js code, But if you bind with ng-model of angular then you can't set value directly with "val()" of jquery. As Bellow example:


But of you set this way then it will display in your text box layout, but you can't get from on submit function. So, you have to also trigger input that way AngularJS can get on controller method.

You can see bellow full example that way you can understand how to solve this issue:


<!DOCTYPE html>



<title>AngularJS - update bind ng-model input value from Jquery Code</title>

<script type="text/javascript" src=""></script>

<script src=""></script>



<div ng-app="mainApp" ng-controller="myController" id="mainController">

<form name="form" ng-submit="submitForm()">

<input type="text" ng-model="" id="my-name" />

<button type="button" class="change-value">Change Value</button>

<button type="submit">Submit</button>



<script type="text/javascript">

var mainApp = angular.module("mainApp", []);

mainApp.controller('myController', function($scope, $timeout) {

$scope.submitForm = function() {





<script type="text/javascript">


var myInput = $("#my-name");







Maybe it can help you...

Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: