Alpaca title change won't take effect post refresh

Question

I've been trying to slightly modify the observables example found in the docs. Instead of having different enums according to user's choice in the radio button, I want the field below to change the title.

Here's a running fiddle for that.

And the following the code snippet so far:

var teams = {
  "None": "None",
  "Milwaukee": "Milwaukee",
  "Cleveland": "Cleveland",
  "Boston": "Boston"
};

$("#form1").alpaca({
  "schema": {
    "type": "object",
    "properties": {
      "city": {
        "title": "Pick a City",
        "type": "string",
        "enum": ["Milwaukee", "Cleveland", "Boston"]
      },
      "team": {
        "title": "nothing yet",
        "type": "string",
      }
    }
  },
  "postRender": function(control) {
    var city = control.childrenByPropertyId["city"];
    var team = control.childrenByPropertyId["team"];
    team.subscribe(city, function(val) {
      //city.schema.title = teams[project.data];
      console.log('updating field title');
      this.schema.title = teams[val];
      //this.parent.refresh();
      this.refresh();
      console.log('refreshed')
    });
  }
});

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<script src="https://code.cloudcms.com/alpaca/1.5.17/bootstrap/alpaca.min.js"></script>
<link href="https://code.cloudcms.com/alpaca/1.5.17/bootstrap/alpaca.min.css" rel="stylesheet"/>

<div id="form1"></div>

Answer 1

In order to change the label of your field you should use options not schema.

this.options.label = teams[val];

Tell me if this isn't working for you.