Knockout JS binding doesn't output value using simple viewmodel

I'm trying to load a simple view model that has two models: Profile (a ko.observable()) and Request (a ko.observableArray()).

When I apply the binding and then try to bind to the ether profile.field or foreach: request, I get no output, no javascript or binding errors. However, when I roll out ko.toJSON(self.profile) or ko.toJSON(self.requests), I actually get the data, it's just not bound, and I'm not sure why, what am I doing wrong.

this is my model

var Profile = function(profile) {   
    var self = this;

    self.id                  = ko.observable(profile.id);
    self.user_id             = ko.observable(profile.user_id);
    self.first_name          = ko.observable(profile.first_name);
    self.last_name           = ko.observable(profile.last_name);
    self.age                 = ko.observable(profile.age);
    self.email               = ko.observable(profile.email);
    self.area                = ko.observable(profile.area);
    self.favorite_restaurant = ko.observable(profile.favorite_restaurant);
    self.avatar              = ko.observable(profile.avatar);
    self.on_mailing_list     = ko.observable(profile.on_mailing_list);
}
var Request = function(request) {
    var self = this;

    self.id           = ko.observable(request.id);
    self.user_id      = ko.observable(request.user_id);
    self.title        = ko.observable(request.title);
    self.participants = ko.observable(request.participants);
    self.food_type    = ko.observable(request.food_type);
    self.event_date   = ko.observable(request.event_date);
    self.time_of_day  = ko.observable(request.time_of_day);
    self.area         = ko.observable(request.area);
    self.description  = ko.observable(request.description);
    self.status       = ko.observable(request.status);
}

Here is my ViewModel

var MasterViewModel = function() {
    var self = this;

    self.profile       = ko.observable();
    self.requests      = ko.observableArray();
    self.notifications = ko.observableArray();

    // load the users profile 
    $.getJSON('/profiles/load', {}, function(profile) {     
        self.profile = new Profile(ko.toJS(profile));
        console.log(ko.toJSON(self.profile));

        // load the users requests
        $.getJSON('/request/load', {}, function(requests){
            var mappedRequests = $.map(requests, function(request) {
                return new Request(request);
            });
            self.requests = mappedRequests;
            console.log(ko.toJSON(self.requests));
        });         
    });
}

Here is the simple binding I am trying to apply

<h2 data-bind="text: profile.first_name"></h2>

<ul data-bind="foreach: requests">
    <li data-bind="text: title"></li>
</ul>

Of course I would apply knockout bindings in the prepared document

  <script>
    $(document).ready(function() {
      // bind the ViewModel
      ko.applyBindings(new MasterViewModel());
    });
 </script>