Angularjs ui-select在指令中使用

我在我的cusom指令里面使用angular-ui ui-SELEct指令叫做timezone.问题是当从列表中选择时区时,不会更新周围控制器的模型对象.
这是我的指令代码： @H_403_8@

@H_403_8@

var myApp = angular.module('MyApp',['ui.SELEct','ngSanitize']);

myApp.directive('timezone',function () {
return {
    reStrict: 'AE',template: '<ui-SELEct theme="bootstrap" ng-model="tzModel" style="min-width: 300px;"> <ui-SELEct-match placeholder="SELEct a timezone in the list">{{$SELEct.SELEcteD}}</ui-SELEct-match> <ui-SELEct-choices repeat="tz in timezones | filter: $SELEct.search"> <div ng-bind-html="tz"></div> </ui-SELEct-choices> </ui-SELEct>',scope: {
        tzModel : '=',},link: function(scopE) {
        scope.timezones = ["Africa/Abidjan","UTC"];
    }
};
});

@H_403_8@我的控制器：

@H_403_8@

@H_931_8@myApp.controller('MyCtrl',function ($scope) { $scope.foo = {name:"Africa/Abidjan"}; }); @H_403_8@这是我在html中使用它的方式：

@H_403_8@

<div ng-app="MyApp" ng-controller="MyCtrl">
  {{foo}}<br />
  <timezone tz-model="foo.name" />
</div>

@H_403_8@问题是,当我从下拉列表中选择一个新值时,我的控制器对象不会更新.
Here is the jsFiddle
我猜ui-SELEct存在问题,因为我已经完成了与其他组件相同的工作.

<timezone tz-model="foo" />

<ui-SELEct theme="bootstrap" ng-model="tzModel.name" ...