为什么指令之间的作用域没有连接

我有下拉指令：dropdown.html:

<div class='dropdown-container' ng-class='{ show: listVisible }'>
    <div class='dropdown-display insetShadow' ng-click='show();' ng-class='{ clicked: listVisible }'>
        <span ng-if='!isPlaceholder'>{{ display }}</span>
        <span class='placeholder' ng-if='isPlaceholder'>{{ placeholder }}</span>
        <i class='fa fa-angle-down'></i>
    </div>
    <div class='dropdown-list'>
        <div>
            <div ng-repeat='item in list' ng-click='select(item)' ng-class='{ selected: isSelected(item) }'>
                <div>
                    <span>{{property !== undefined ? item[property] : item}}</span>
                    <i class='fa fa-check'></i>
                </div>
            </div>
        </div>
    </div>
</div>

JS:

.directive('dropdown', ['$rootScope', function($rootScope) {
    return {
        restrict: "E",
        templateUrl: "templates/dropdown.html",
        scope: {
            placeholder: "@",
            list: "=",
            selected: "=",
            property: "@",
            value: "@"
        },
        link: function(scope, elem, attr) {
            scope.listVisible = false;
            scope.isPlaceholder = true;
            scope.select = function(item) {
                scope.isPlaceholder = false;
                scope.selected = item[scope.value];
                scope.listVisible = false;
            };
            scope.isSelected = function(item) {                                                                                      
                return item[scope.value] === scope.selected;
            };
            scope.show = function() {
                scope.listVisible = true;
            };
            $rootScope.$on("documentClicked", function(inner, target) {
                if(!$(target[0]).is(".dropdown-display.clicked") && !$(target[0]).parents(".dropdown-display.clicked").length > 0) {
                    scope.$apply(function() {
                        scope.listVisible = false;
                    });
                }
            });                     
            scope.$watch('selected', function(value) {
                if(scope.list != undefined) {
                    angular.forEach(scope.list, function(objItem) {
                        if(objItem[scope.value] == scope.selected) {
                            scope.isPlaceholder = objItem[scope.property] === undefined;
                            scope.display = (objItem[scope.property].toLowerCase().indexOf('пусто') == -1) ? objItem[scope.property] : '';
                        }
                    });
                }
            });
            scope.$watch('list', function(value) {
                angular.forEach(scope.list, function(objItem) {
                    if(objItem[scope.value] == scope.selected) {
                        scope.isPlaceholder = objItem[scope.property] === undefined;
                        scope.display = objItem[scope.property];
                    }
                });
            });
        }
    }
}])

用法：

<dropdown placeholder='' list='actions' selected='' property='title' value='id' style='width:150px;'></dropdown>

属性：list=>要在下拉列表中显示的对象数组，基本数据。selected=>要保存的范围中的变量的下拉值（选定对象字段中的值）。property=>数组中对象的字段，以便在下拉列表中像标签一样显示，供用户选择值。value=>对象的字段类似于选定的值。

示例：

$scope.savedValue;
$scope.dataList= [{
    'title' :'text text text 111',
    'id':'1'
}, {
    'title' :'text text text 222',
    'id':'2'
}, {
    'title' :'text text text 333',
    'id':'3'
}, {
    'title' :'text text text 444',
    'id':'4'
}, {
    'title' :'text text text 555',
    'id':'5'
}]; 

不工作（不知道为什么）：

<dropdown placeholder='' list='dataList' selected='savedValue' property='title' value='id'></dropdown>

工作：

$scope.obj = {};
$scope.obj.savedValue;
<dropdown placeholder='' list='dataList' selected='obj.savedValue' property='title' value='id'></dropdown>