Ember.js: Removing an object from an ArrayController

I have an ArrayController that uses an itemController to manage a set of components. The ArrayController in this example represents a book, and the item controllers represent the pages of the book. Each page has a unique ID that is generated by a App.generateId function. The model for a page is App.Page. It does not use Ember-Data.

// ArrayController
App.BookController = Ember.ArrayController.extend({
  itemController: 'page',

  addPage: function (options) {
    return this.pushObject(
      App.Page.create({
        uid: App.generateId('page')
      })
    );
  },

  removePage: function (page) {
    console.log('Content array: ' + this.get('content'));
    console.log('Content array length: ' + this.get('content').length);
    console.log('Page UID: ' + page.get('uid'));
    console.log('Page at content[0]: ' + this.objectAt(0));
    console.log(this.findProperty('uid', page.get('uid')));
  }
});


// ItemController
App.PageController = Ember.Controller.extend({});

// Page Model
App.Page = Ember.Object.extend({
  uid: ''
});

The addPage method woks fine. It gets called and successfully creates+adds a page to the book and wraps it in the item controller.

I am having trouble with the removePage function. Here is the output of the console logs that I have in that method (after adding 1 page, and trying to remove it):

console.log('Content array: ' + this.get('content'));
//--> Content array: <(subclass of App.Page):ember667>

console.log('Content array length: ' + this.get('content').length);
//--> Content array length: 1

console.log('Page UID: ' + page.get('uid'));
//--> Page UID: page-cm6p6pmmt5aq50i9ej7ona1dsand3mf

console.log('Page at index 0: ' + this.objectAt(0));
//--> Page at index 0: <App.PageController:ember668>

console.log(this.findProperty('uid', page.get('uid')));
//--> undefined

I am confused on two points:

1. When I output the contents of content on the ArrayController, it shows the single page as a subclass of the model (App.Page) with Ember ID 667. When I look at the object at index 0 of the content array with this.objectAt(0), it shows me not the model, but the item controller for the page, with Ember ID 668. Shouldn't these two outputs be the same?

2. Why does the findProperty method return undefined? The same happens for other methods as well, such as findBy. I see that Ember.ArrayController extends Ember.ArrayProxy, which then in turn uses Ember.MutableArray. I've read that you can't do this sort of stuff to immutable arrays out of Ember-Data.

Any help is extremely appreciated.