将Angular自定义指令绑定到模型的问题

Question

我正在尝试让两个多选小部件保持同步，但我只能将行为朝一个方向发展。

一个小部件位于主页面上，另一个小部件位于角度ui-bootstrap模式中。两个多选小部件都是使用自定义指令创建的。指令的每个实例都绑定到不同的控制器（MainCtrl和ModalCtrl）。指令的每个实例的“selected”属性绑定到各自控制器中的作用域变量，该控制器又绑定到Model中的相同getter方法（getSelectedFilters）。

如果我在主页面上更改窗口小部件上的选择，则更改将反映在模式面板中的窗口小部件中。但是，如果我更改模态面板中的选择，即使模型已正确更新，更改也不会反映在主页面上的窗口小部件中（即使窗口小部件，“显示当前选中”按钮也会显示正确的选择没有）。我完全不了解它的区别。

这是一个精简的plnkr，说明了我的问题。

http://plnkr.co/edit/nC5bkGFE4LkYZsaxdjL7?p=preview

我是Angular的新手，并且非常感谢任何关于为什么当模型中的数据发生变化时主页上的指令没有正确更新的输入。

Answer 1

plnkr的第7版是我最初发布的。

基本上，只要更改了值，就在$ scope.selected上调用$ apply不足以通知另一个指令。我还必须设置$ watch：

$scope.$watch('selected', function(newVal, oldVal) {
    select2.val(newVal).select2(options);
});

我现在完全不清楚为什么当我在主页面上修改select2指令时，模态中的select2指令完全没有$ watch更新。如果有人能解释那里发生了什么，我会很高兴！对于任何可能知道的人，请回到第7版看看我的意思。