Value not updating in the view - angularjs

Question

With the code below, the age2 doesn't get updated even though age changes.
<div ng-app="myApp" ng-controller="myController">
<input type="text" ng-model="age" placeholder="Name"></input>
<input type="text" ng-model="firstName" placeholder="First name"></input>
<h1>Hi there, {{ firstName }}, you are {{ age }} year old, age2 is {{ age2 }}!</h1>
var app = angular.module('myApp', []);
app.controller('myController', function($scope){
$scope.age = 20;
$scope.age2 = parseInt($scope.age) + 1;
});
Could anyone tell me what's wrong with it? If I change age2 to a function:
{{ age2() }}
$scope.age2 = function(){return parseInt($scope.age) + 1};
it's working well though. I know that Angular checks if the value has changed, if it stays the same in two consecutive 'checks' then it updates the view. If it takes too long, then probably the values will be changing forever and it throws an error (from what I've understood).

Answer 1

There are a few ways of dealing with it.
Using a watcher:
$scope.$watch('age', function(newVal, oldVal) {
$scope.age2 = parseInt(newVal) + 1;
})
Using a function in the controller:
$scope.parseAge = function(age) {
return parseInt(age) + 1
}
{{ parseAge(age) }}
Or using a filter:
app.filter('parseAge', function() {
return function(input) {
return parseInt(input) + 1;
}
});
{{ age | parseAge }}

Answer 2

To directly answer the question:
In the first case you are only assigning the value of age2 when the controller first initializes. There is no inheritance or watch that would ever change that value.
When it is a function called in the view it will get re-evaluated each digest.
If you are working with a simple operation like what you have you could also do the addition in the view among numerous other ways to make it work
{{ +age +1 }}