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