How to programmatically perform ArrayController[index] in Ember?

I know how to find an item by a specific property (this.findBy(prop, value)). And I know how to get the bare item from the underlying array model (this.get("model")[index]).

But how do I get the fully ItemController wrapped model at a specific index if I have reference to an ArrayController?

To make it clearer, here's an extended colors array example that demonstrates what I need.

App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

function color(name, value) {
  return Ember.Object.create({name: name, value: value || name});
}

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return [
      color("red"),
      color("green"),
      color("yellow"),
      color("purple")
    ];
  }
});

App.IndexController = Ember.ArrayController.extend({
  itemController: "color",
  atIndex: 2,
  actions: {
    setNewValue: function () {
      var index = this.get("atIndex");
      alert("How to find collor itemController #" + index + " from here?");
    }
  }
});

App.ColorController = Ember.ObjectController.extend({
  _isPrimary: null,
  isPrimary: function (_, newValue) {
    if (newValue) {
      this.set("_isPrimary", newValue);
    }
    var value = this.get("_isPrimary");
    return value || ["red", "green", "blue"].indexOf(this.get("name")) >= 0;
  }.property("name"),
  
  style: function () {
    return "color: " + this.get("value") + ";";
  }.property("value")
});

<link rel="stylesheet" href="http://ift.tt/1x2iORp">
<script src="http://ift.tt/1mWWrGH"></script>
<script src="http://ift.tt/1ryZ1pe"></script>
<script src="http://ift.tt/1HQ7eLT"></script>

  <script type="text/x-handlebars">
    <h2>Welcome to Ember.js</h2>

    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="index">
    <ul>
    {{#each item in this}}
      <li {{bind-attr style=item.style}}>
        {{item.name}}
        {{#if item.isPrimary}}
          (primary)
        {{/if}}
      </li>
    {{/each}}
    </ul>
    <hr />
    <button type="button" {{action setNewValue}}>Set as primary</button>
    <label>at index: {{input value=atIndex}}</label>
  </script>

In case this embedded thing doesn't work, mirror on jsbin.

Things I've tried:

• this.get(1)


• this.get("1")


• this.get("this.1")


• this.get("this.[1]")


• this.get("this[1]")

No luck so far.

If this can't be done, can I at least find the item through underlying model and then somehow use that to find its ItemController wrapped version?