Two way binding breaks in Ember when using a jquery ui dialog

Here are my routes:

ExtractCreator.Router.map(function () {
    this.route('filter', { path: '/' }, function () {
        this.route('geog_levels');
    });
});

Here's my view which creates the jquery ui popup:

ExtractCreator.FilterGeogLevelsView = Ember.View.extend({
didInsertElement : function(){
    var controller = this.controller;
    $('#filter-dialog').dialog({
        modal:true,
        stack: false,
        title: "Geogography Levels Filter",
        close: function(e,ui) {
            controller.transitionToRoute('filter');
        },
    }).dialog("moveToTop");
}
});

And the template:

      {{#each geog_level_group in model}}
            <h3>{{geog_level_group.label}}</h3>
            {{#each geog_level_filter in geog_level_group.geog_level_filters}}
            <div {{bind-attr class="geog_level_filter.disabled?:disabled"}}>
                <label>{{geog_level_filter.label}} - {{geog_level_filter.id}}</label> 
                {{input type="text" value=geog_level_filter.label }}
            </div>
            {{/each}}
        {{/each}}

I'm binding the inputs to my model in the template, but whenever I type anything in the input field it doesn't update anywhere else on the page, nor does it show as updated in my (chrome) ember inspector's view of the model.

If I change the value manually from the ember inspector, then it updates inside the popup correctly.

If I take it out of the popup (or just remove the popup code), then everything binds correctly and the label will update when I change the input value.

How do I get correct binding behavior to work from inside the dialog?