AngularJS data binding single value to two variables. Second variable not updating in view

Question

I have a textbox who's value is bound to $scope.stringOne in my controller. I then have a second variable, $scope.stringTwo which is a concatenation of stringOne and more text.

However, when I type in the textbox, stringOne is successfully updated in the View, but stringTwo remains unchanged.

What else is needed to make this work, so that the stringTwo value is also updated when stringOne is updated?

HTML

<body ng-controller="mainCtrl">
    <div class="container">       
        <label>Enter Text</label>
        <input type="text" ng-model="stringOne"/>
        <h1>{{stringOne}}</h1>
        <h1>{{stringTwo}}</h1>
    </div>
</body>

JS

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

myApp.controller('mainCtrl',['$scope',function ($scope,) {

$scope.stringOne = '';
$scope.stringTwo = $scope.stringOne + ' more texts';

}]);

score 4 · Accepted Answer · edited May 23 '17 at 12:22

4

Use $watch

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

myApp.controller('mainCtrl',['$scope',function ($scope,) {

    $scope.stringOne = '';
    $scope.$watch('stringOne', function(new_value){
        $scope.stringTwo = new_value + ' more texts';
    });
}]);

Official docs
Helpful post about watch

Why this happens

When you initialize your $scope.stringOne it receives empty string, and when you add it in html ng-model attribute, it basically watches that variable for changes, but $scope.stringTwo you need to watch it yourself

edited May 23 '17 at 12:22

Community

1
1

answered Aug 29 '15 at 16:07

Medet Tleukabiluly

11,662
3
34
69

I'm struggling to understand why `$scope.stringTwo` has fallen outside the scope of being automatically watched, since I though it was bound to the view with `{{stringTwo}}`. So is ng-model creating a watcher for me, in regards to `stringOne`? And simple binding to a view doesn't necessarily create a watcher? – I think I can code Aug 29 '15 at 16:21
View doesn't know about changes of `stringTwo` because it was initialized, with value ` $scope.stringOne + ' more texts'` but it's not changed, only initialized, it doesn't know about changes of `$scope.stringOne`, it just received empty string from it – Medet Tleukabiluly Aug 29 '15 at 16:31

score 0 · Answer 2 · answered Aug 29 '15 at 16:23

You can combine them in template, and see changing. <h1>{{stringOne + stringTwo}}</h1>
Demo:

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

myApp.controller('mainCtrl',function ($scope) {

$scope.stringOne = '';
$scope.stringTwo = 'more texts';

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="mainCtrl">
    <div class="container">       
        <label>Enter Text</label>
        <input type="text" ng-model="stringOne"/>
        <h1>{{stringOne}}</h1>
        <h1>{{stringOne + stringTwo}}</h1>
    </div>
</body>

While this could work, I probably should have explained my setup better. The reason that I'm combining in the controller and not in the view, is because `stringTwo` is used as a variable in other functions as well. So if I were to combine them in the view, I would not have a usable variable in the controller. — I think I can code, Aug 29 '15 at 16:28

AngularJS data binding single value to two variables. Second variable not updating in view

2 Answers2