Rivets.js binding default javascript adapter not updating always

Question

I am new to Rivets.js but I have got a basic site working with array collections of my own js models just using the default adapter with rivets. It works fine if I push and splice model objects from an array - the view updates perfectly. However if I try to use a variable reference to just one model object the view renders perfectly on first page load but then if I change the reference to point to another model the dom doesn't update. So I guess the binding isn't being triggered by the object change.

I don't really want to use any other model frameworks like BackBone if possible. Is there a way I can structure my models so they bind correctly and an update is triggered by a change to the model reference?

How does the default rivets adapter work exactly - I can see from the Rivets.js file that it detects array changes and . changes but not 100% how I can write my models to work?

Any help in keeping it simple would be greatly appreciated.

Here is an example of what I mean:

***** HTML
<div id="overview" rv-data-id="model.id">
  <h1>{ model.title }</h1>
  <h3 rv-text="model.description"></h3>
  <section class="content" rv-html="model.copy"></section>
  <div id="open-close-prompt" rv-on-click="controller.onToggleCaseStudyOverView">Update</div>
</div>

***** JS
var t = this;

var firstCaseStudy = {id:"1", title:"test 1 ",description:"1 a test description", copy:"test copy 1"};
var anotherCaseStudy = {id:"3", title:"test3 ",description:"3 a test description", copy:"test copy 3"};

var caseStudyModel = {cs:firstCaseStudy};

var overViewDOM = $('#overview');
var overView = rivets.bind(overViewDOM, {model: caseStudyModel.cs, controller:t});

//Method called when link clicked ion page
t.onToggleCaseStudyOverView = function(){

    //THIS DOES UPDATE
    caseStudyModel.cs.id = "2";
    caseStudyModel.cs.title = "update title 2";

    //THIS DOESN'T UPDATE
    caseStudyModel.cs = anotherCaseStudy;
}