SOURCE

cola(function(model) {
  model.dataType({
    name: "Company",
    properties: {
      depts: {
        provider: "//open-data.cola-ui.com/service/company/{{@id}}/depts"
      }
    }
  });

  model.describe("companies", {
    dataType: "Company",
    provider: "//open-data.cola-ui.com/service/company"
  });

  model.action({
    setCurrent: function(company) {
      model.get("companies").setCurrent(company);
    }
  });
});

<box>
	<li c-repeat="company in companies">
		<span c-bind="$index"></span>
		<span c-bind="company.name" c-href="company.url" c-onclick="setCurrent(company)"></span>
	</li>
</box>
<box>
	<li c-repeat="dept in companies.depts">
		<span c-bind="$index"></span>
		<span c-bind="dept.name"></span>
	</li>
</box>

box {
    display: inline-block;
    width: 400px;
    height: 600px;
    overflow: auto;
    margin: 4px;
    padding: 12px;
    border: 1px solid #000;
  }

  li {
    padding: 6px 0;
    cursor: pointer;
  }
  li.current {
    color: #fff;
    background: #0e8c8c;
  }