angular two way dymanic binding issue - angularjs

Question

Im trying to output the following info and have it update realtime using angulars automatic binding. the first and last update ok, but full isnt updating as I would expect. im grateful for any assistance.
http://jsfiddle.net/laurencefass/74u313gx/1/
required output:
first = john
last = doe
full name=john doe.
HTML
<div ng-app="nameApp">
<div ng-controller="nameController">
<input ng-model="first"/>
<p>first = {{first}}</p>
<input ng-model="last"/>
<p>last = {{last}}</p>
<p>full name = {{full}}</p>
</div>
JS
var app=angular.module("nameApp", []);
app.controller('nameController', function($scope) {
$scope.first="john";
$scope.last="doe";
$scope.full = $scope.first + " " + $scope.last;
});
initial output seems correct and the first and last update as expected. but the full name is not updating despite being a $scope var and a product of first and last.

Answer 1

The following line is only run once. So it is initiated with the first value that has been assigned to first and last.
$scope.full = $scope.first + " " + $scope.last;
So, if you want your binding to work, without having a unnecessary fonction into your controller. (keep your controllers as clean as possible!)
<div ng-app="nameApp">
<div ng-controller="nameController">
<input ng-model="first"/>
<p>first = {{first}}</p>
<input ng-model="last"/>
<p>last = {{last}}</p>
<p>full name = {{first + ' ' + last}}</p>
</div>
</div>
Have a look at your fiddle :
http://jsfiddle.net/74u313gx/2/
If you really need to have the fullname into the controller, you can use a $watch therefor :
$scope.$watch('first', updateFull);
$scope.$watch('last', updateFull);
function updateFull(){
$scope.full = $scope.first + " " + $scope.last;
}
If you are concerned by performance, you may want to avoid defining to much watches, then a ng-change can be used :
controller :
$scope.updateFull = function(){
$scope.full = $scope.first + " " + $scope.last;
}
View :
<div ng-app="nameApp">
<div ng-controller="nameController">
<input ng-model="first" ng-change="updateFull();"/>
<p>first = {{first}}</p>
<input ng-model="last" ng-change="updateFull();"/>
<p>last = {{last}}</p>
<p>full name = {{full}}</p>
</div>

Answer 2

Since you're defining a string on $scope that is concatenated with several parameters, it won't change automatically when you change the parts that you used to assemble it with.
If you want to achieve what you're looking for, you can do one of two things:
One:
<p>full name = {{first + ' ' + last}}</p>
Two:
<p>full name = {{getFullName()}}</p>
And in the controller have a function:
$scope.getFullName = function () {
return $scope.first + ' ' + $scope.last;
}

Answer 3

it will not update auto since your are passing a string in full name after concatenation it returns simple string not an angular var, you need to do the following to update value automatically.
$scope.$watchGroup(["first","last"],function(){
$scope.full = $scope.first + " " + $scope.last;
});

Answer 4

update your code like below:
View Update
<div ng-app="nameApp">
<div ng-controller="nameController">
<input ng-model="first" ng-change="change()"/>
<p>first = {{first}}</p>
<input ng-model="last" ng-change="change()" />
<p>last = {{last}}</p>
<p>full name = {{full}}</p>
Script Update
var app=angular.module("nameApp", []);
app.controller('nameController', function($scope) {
$scope.first="john";
$scope.last="doe";
$scope.full = $scope.first + " " + $scope.last;
$scope.change= function(){
$scope.full=$scope.first + " " + $scope.last;
}
});
As you seen above, I am changed/update view page input elements with ng-change directive and create same scope function to namecontroller w.r.t.nameApp Module.
Hope its helps you!!!