最近因為需要，使用 AngularJS 與 Semantic UI 作為網站開發的前端框架。
AngularJS 的特性與方便的地方，就是他的雙向資料綁定功能。

然而，Semantic UI 預設是使用 jQuery 來操作他的元件等。

以 Semantic UI 提供的 Dropdown 為例

  
    衣服尺寸
    XS
    S
    M
    L
    XL
    XXL
  

會發現一個有趣的現象，
當下拉選單選取的時候，size 這個 model 會更新
但從 controller 更新 $scope.size 時 (或從另一個 input 更新 size)，卻不會同步到 Dropdown 上跟著選取。

原因是 size 雖然與 <select> 綁定了，但 AngularJS 與 Semantic UI 各自為政
想要更新 Dropdown？ 沒問題！ 請透過 Semantic UI 提供的 jQuery API 來更新。

$('.dropdown').dropdown('set selected', 'XL');

使用 Semantic UI 提供的 API 固然能解決下拉選單的選擇問題，但這樣只有單向呀！

能不能當我選擇下拉選單的時候，size model 跟著更新；而手動指派 size 的時候，下拉選單跟著更新？

有鑑於此，只好使用 AngularJS 的 $watch，監視 $scope.size 的變化。當有變化的時候，手動同步到下拉選單上。

$scope.$watch('size', function (n, o) {
    $timeout(function() {
        angular.element('select[ng-model=size]').dropdown('set selected', n );
    });
}, true);

使用 $scope.$watch 監視 size 的變化，
當一有變化的時候，立刻執行一次 dropdown 的 set selected 方法。

angular.element 的選擇器可以自定，但我習慣直接用 [ng-model=size] 來當作名稱，
因為這樣就不需要另外指定 ID 或 name 了。

如此一來，改變下拉選單，size 本來就會更新，但改變 size 時，下拉選單也可以同步更新了。

算是... 手動綁定吧..

PS. 所需要的 $scope $timeout 記得注入。