nesting of computed properties in knockoutjs

I am trying to use one computed properties into another computed properties which use toUpperCase function to show string in UPPERCASE .


so here is my HTML

<p><input data-bind="value: firstName"></p>

<p><input data-bind="value: lastName"></p>

<p><input data-bind="value: fullName"></p>

<p> <span data-bind="text: upperFullName"> </span> </p>

And ViewModel is as follow : 

 function AppViewModel() {

    var self = this; 
    self.firstName = ko.observable('rahul');
    self.lastName = ko.observable('sharma');
    self.fullName = ko.computed(function() {
      return self.firstName() +' ' + self.lastName();
    });
    self.upperFullName = ko.computed(function() {
      return self.fullName().toUpperCase();
    });  
}
// Activates knockout.js
ko.applyBindings(new AppViewModel()); 

JS FIDDLE LINK 

simple example of computed properties in knockoutjs

Here is html for binding of computed properties 

<p><input data-bind="value: firstValue"></p>

<p><input data-bind="value: secondValue"></p>

<p><input data-bind="value: addValue"></p>

 and out model , we are using here in our model computed properties of knockout js which will be always reacts to change in the properties on the basis of this property is computed. so any change in firstValue or secondValue will also change the result of addValue computed properties. 

function AppViewModel() {
    var self = this; 
    self.firstValue = ko.observable(6);
    self.secondValue = ko.observable(5);
    self.addValue = ko.computed(function() {
      return parseInt(self.firstValue()) + parseInt (self.secondValue());
    });
}

// Activates knockout.js
ko.applyBindings(new AppViewModel()); 

and here is js fiddle link