How to bind 2 models to one input field in Angular?

Question

How to bind 2 models to one input field in Angular?

is there anyway that i can bind two model to one input field ? Suppose I have input field which I want to be the value of two variables in the scope something like:

<input type="text" model="sn_number; id" >

angularjs

Answer 1

You cannot, but there are some workarounds.

1. Use ngChange to update the other model

<input type="text" 
       ng-model="sn_number" 
       ng-change="id=sn_number"/>

2. You could watch a model, and when in changes, update another

$scope.$watch('sn_number', function(v){
  $scope.id = v;
});

You would need to watch also for changes in id if you want to keep them in sync.

Example here

Answer 2

It would make no sense to bind an input to two variables in the model. Binding works both ways, so if the model is updated, the field is updated and vice-versa. If you were to bind to two variables, what would be the single source of truth?

However you can use ng-change to call a method on the controller which can set two variables when the field changes.

Answer 3

with ng-init

<div ng-controller="ctrl" ng-init="model = { year: '2013', month:'09'}">

or

<div ng-repeat="c in contact" ng-init="likes = { food: 'steak', drink:'coke'}">

Answer 4

I assume u only want to combine them on display not update in a disabled input field...best is to add a field to your model , then populate that field with the concatenated string where you set the values of the other fields, and then use that model field for display.