在同一个DOM元素上使用两个指令会破坏绑定

Question

我有以下标记：

<div addressbook loader-channel="addressbook" loader="loader.promise">
    <div loader-success="addressbook">
        <div contacts="{{ contacts }}" selected-contact="selectedContact">

这里，主应用程序是addressbook指令。

loader是另一个在顶部运行的指令。在检索数据时，它会显示一个ajax加载程序图标，并隐藏loader-success div。加载完成后，将显示loader-success div，并删除加载器图标。 promise用于控制此情况。

我的contacts指令只显示了一个联系人列表。如果用户点击其中一个，则selectedContact会发生变化，主应用会注意到这一点。因此，contacts作为单向绑定传递，selectedContact作为双向绑定传递。

以下是两者的指示：

app.directive('addressbook', function($q, $resource)
{
    return {
        restrict: 'A',
        templateUrl: 'path/to/file',
        link: function(scope, element, attrs)
        {
            scope.loader          = $q.defer();
            scope.contacts        = null;
            scope.selectedContact = null;

            $resource('users').query(function(response) {
                scope.contacts = response;
                scope.loader.resolve();
            });

            scope.$watch('selectedContact', function(contact) {
                if (! contact) return;

                // Now contact is changed. Show this contact
                // But this does not work
            });
        }
    }
});

app.directive('contacts', function($q, $resource)
{
    return {
        restrict: 'A',
        scope: {
            contacts        : '@',
            selectedContact : '='
        },
        templateUrl: 'path/to/other/file',
        link: function(scope, element, attrs)
        {
            attrs.$observe('contacts', function(contacts) {
                if ( ! contacts) return;

                scope.contacts = angular.fromJson(contacts);
            });

            // This is called through ng-click
            scope.select = function(contact) {
                scope.selectedContact = contact;
            }
        }
    }
});

未触发$watch。如果我删除loader属性，则会触发它。我有什么选择？