Profile Issue

From question on SO.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="row profileblackBg">
   <div class="container">
      Where are we: <a href="#">SE Faces</a> / <a href="#"><span data-bind="text: name"></span></a>
   </div>
   <div class="row blueBg">
      <div class="container">
         <div class="col-sm-5 col-md-4 profileleft nopadding">
            <!-- Image -->
            <div class="col-xs-7 col-md-5 col-lg-4  profileImage nopadding">
               <img data-bind="attr: {src: profileicon}" class="profileThumb">
               <div class="overlay">
                  <div class="text">
                     <button type="button" data-toggle="modal" data-target="#editimage"><span class="glyphicon glyphicon-camera"></span>Change Picture</button>
                  </div>
               </div>
            </div>
            <!-- Image -->
            <!-- Name -->
            <div class="col-xs-5 col-sm-6 profileDetails nopadding">
               <span class="profileName" data-bind="text: name"></span>
               <br>
               <span class="profileTitle" data-bind="text: title"></span>
            </div>
            <!-- Name -->
         </div>
         <!-- Contact -->
         <div class="col-sm-4 col-md-3 profilePhone">
            <p><img src="css/images/phone_icon.png">&nbsp;Work Phone: <span data-bind="text: work_phone"></span></p>
            <p><img src="css/images/mobile_icon.png">&nbsp;Mobile: <span data-bind="text: mobile_phone"></span></p>
            <p><img src="css/images/email_icon_pink.png">&nbsp; <span data-bind="text: work_email"></span></p>
         </div>
         <!-- Contact -->
         <!-- Hub -->
         <div class="col-sm-3 col-md-3 profileAddress">
            <div>
 ...

JavaScript

var data = profiles = {
   items: [{
      display_name: "Mike ABC",
      title: "My Title",
      work_email: "email@test.com",
      work_phone: "123456789",
      mobile_phone: "987654321",
      city: "Los Angeles",
      state: "CA",
      country: "USA",
      uuid: "6c84fb90-12c4-11e1-840d-7b25c5ee775a",
      ou: " This is ou",
      cost_center: "This is cost_center",
      pillar: "This is pillar",
      center: "This is center",
      mgr_email: "mgr@email.com",
      mgr_display_name: "mg name here",
      profile_summary: "This is your profile summary "
   }]
}

var profileVM = function() {
   var self = this;
   self.profileicon = ko.observable("https://raw.githubusercontent.com/Ora-digitools/oradigitools/master/UI_Assets/Profile-list-page/default-user-icon.png");
   self.name = ko.observable(profiles.items[0].display_name);
   self.title = ko.observable(profiles.items[0].title);
   self.work_email = ko.observable(profiles.items[0].work_email);
   self.work_phone = ko.observable(profiles.items[0].work_phone != undefined ? profiles.items[0].work_phone : profiles.items[0].mobile_phone);
   self.mobile_phone = ko.observable(profiles.items[0].mobile_phone != undefined ? profiles.items[0].mobile_phone : profiles.items[0].work_phone);
   self.city = ko.observable(profiles.items[0].city);
   self.state = ko.observable(profiles.items[0].state),
   self.country = ko.observable(profiles.items[0].country);
   self.uuid = ko.observable(profiles.items[0].uuid);
   self.ou = ko.observable(profiles.items[0].ou);
   self.cost_center = ko.observable(profiles.items[0].cost_center);
   self.pillar = ko.observable(profiles.items[0].pillar);
   self.center = ko.observable(profiles.items[0].center);
   self.mgr_email = ko.observable(profiles.items[0].mgr_email);
   self.mgr_display_name = ko.observable(profiles.items[0].mgr_display_name);
   self.profile_summary = ko.observable(profiles.items[0].profile_summary != undefined ? profiles.items[0].profile_summary : "no...