Bind a variable to a model inside a controller

Question

I'm trying to programmatically bind a variable inside my Controller to a model bound to an input like this

<body ng-app="myApp">
    <div ng-controller="MyController">
        <input type="text" ng-model="myVar1" /> {{ myVar1 }}
        <br />
        <input type="text" ng-model="myVar2" /> {{ myVar2 }}
        <br />
        {{ myVar3 }}
    </div>
</body>

var myApp = angular.module('myApp', []);

myApp.controller('MyController', ['$scope', function($scope){
    $scope.myVar3 = $scope.myVar1;
}]);

But as you can see in this fiddle the value of myVar3 does not change as I type inside the first input. I know that in any language primitive variables are copied by value and not by reference so could just define my models as objects and then copy the reference to myVar3 like this (see fiddle):

<body ng-app="myApp">
    <div ng-controller="MyController">
        <input type="text" ng-model="myVar1.value" /> {{ myVar1.value }}
        <br />
        <input type="text" ng-model="myVar2.value" /> {{ myVar2.value }}
        <br />
        {{ myVar3.value }}
    </div>
</body>

var myApp = angular.module('myApp', []);

myApp.controller('MyController', ['$scope', function($scope){
    $scope.myVar1 = {};
    $scope.myVar2 = {};
    $scope.myVar3 = $scope.myVar1;
}]);

The problem is that I don't want to create objects everytime I need to dinamically link a variable to a model, it's there a more "angular" way to achieve the same result using the first code?

Thanks,

http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs/14049482#14049482. Always have a dot in your ng-model — Jonathan de M., Jun 11 '14 at 23:25
Thanks for the link but I don't think this is quite my problem because everything is happening inside the same scope, the scope of MyController so there is no scope inheritance involved (besides rootScope) — David Barreto, Jun 11 '14 at 23:38
I would highly encourage anyone reading this to read the link above: http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs/14049482#14049482 — Jazzy, Jun 12 '14 at 17:59
@Jason I don't get it, the article talks about scope inheritance which I think is not my case. How should I solve my problem using that information? Is my second approach using objects more appropriate? Could you please provide me some code with the proper solution? — David Barreto, Jun 12 '14 at 19:10
@David, I think the solution to your problem that you chose is correct based on the Angular docs. I was simply recommending that article generally as it is extremely informative on how inheritance is working when you are using Angular (or JS in general). — Jazzy, Jun 17 '14 at 01:32

score 1 · Accepted Answer · answered Jun 11 '14 at 23:25

The line The line $scope.myVar3 = $scope.myVar1; will only execute one time, when the controller is loaded in the page. What you need is to place that sentence in a controller function bound to any of the input's key events.

Fiddle: http://jsfiddle.net/dGvm8/

Bind a variable to a model inside a controller

1 Answers1