Angular: update scope inside scope

Question

I have a controller with 2 scopes:

app.controller('search', function($scope) {
    $scope.value1 = '';
    $scope.value2 = 'Some text' + $scope.value1;
}

And an input field:

<input type="text" ng-model="value1">

When I change value1 with the input field (which works), value2 doesn't get updated. How can I make this work?

Answer 1

You could follow dot rule while declaring object. That will give you prototypal inheritance thing. Both param1 & param2 will refer to the same copy of object. So that updating one would update the other one automatically.

Markup

<input type="text" ng-model="param1.value">
<input type="text" ng-model="param2.value">

Controller

app.controller('search', function($scope) {
    $scope.param1 = {value : ''};
    $scope.param2 = $scope.param1;
}

Demo Plunkr

Update

If you wanted to keep those variable as primitive then you should have to update them on some event like here you could do it by using ng-change directive

Markup

<input type="text" ng-model="value1" ng-change="value2 = value1 + ' something'">

Or simply you can move inline html code to you controller function to make it testable.

Markup

<input type="text" ng-model="value1" ng-change="changedValue()">

Code

$scope.changedValue = function(){
    $scope.value2 = $scope.value1 + ' something' 
}