AngularJS data binding by DOM manipulation

Question

AngularJS data binding by DOM manipulation

When I type some string to input element directly, two-way data binding of AngularJS works very well. But when I change value of input element by javascript code, two-way binding does not work. Is there a good way for doing this?

html code:

<div ng-app ng-controller="Ctrl">
    <input id="inputElem" ng-model="modelName" type="text"/>
    <span>{{modelName}}</span>
</div>

javascript code:

function Ctrl($scope) {
    $scope.modelName = "";
}

function foo() {
    // THIS DOES NOT TRIGGER ANGULAR DATA-BINDING!!!!
    $("#inputElem").val("THIS IS DOM MANIPULATION");
}

javascript
jquery
dom
angularjs

Answer 1

You can achieve this by triggering the change event

$("#inputElem").val("THIS IS DOM MANIPULATION").trigger('change');

Demo: Plunker

Another hack to modify the binded value

var scope = angular.element('#inputElem').scope();
scope.$apply(function(){
  scope.modelName = "THIS IS DOM MANIPULATION";
});

Demo: Plunker

Answer 2

You're really supposed to change the model for that rather than the other way around:

http://jsfiddle.net/b9chris/EBWtR/

<div ng-app>
<div ng-controller=Ctrl>
<div><input ng-model=thing /></div>
<div ng-bind=thing></div>
</div>
</div>

function Ctrl($scope) {
    $scope.thing = 'Hi';

    // Later, for some reason you want to change the
    // input in code so you update the model
    setTimeout(function() {
        $scope.thing = 'Bye';
        $scope.$apply();
    }, 2000);
}

Answer 3

When you change something outside of angular, you have to call $apply on the $scope, to have your changes applied.

From the docs:

$apply() is used to execute an expression in angular from outside of the angular framework. (For example from browser DOM events, setTimeout, XHR or third party libraries).

http://docs.angularjs.org/api/ng.$rootScope.Scope

Answer 4

You can use the ngChange directive for that: http://docs.angularjs.org/api/ng.directive:ngChange