两个指令引用一个变量，但第二个指令不引用;不要急于改变

我有两个指令引用同一个父变量。第一个指令是下拉列表。第二个指令是一个表。我试图实现的是：当在下拉列表中进行选择时，父变量将发生变化。使用$scope的第二个指令$watch将检测到此更改并将数据加载到表中。问题是第二个指令没有检测到更改。我不明白为什么。

// home.html
<div>
    <directive-one testid="home.changevalue"></directive-one>
    <br />
    <directive-two testid="home.changevalue"></directive-two>
</div>
// search.directive.html
<div style="margin-top:5px;margin-left:25px;">
    <div class="row" style="margin-bottom:10px;">
        <label for="searchoptions" style="margin-left:15px;">Food Items</label>
        <br />
        <select style="margin-left:15px;" name="searchoptions" id="searchoptions1" ng-model="searchFoodItems.fooditemid" ng-change="searchFoodItems.onSelectionChange()">
            <option value="">Select ...</option>
            <option ng-repeat="fooditem in searchFoodItems.fooditems" value="{{fooditem.entryid}}">{{fooditem.itemdesc}}</option>
        </select>
        &nbsp;&nbsp;&nbsp;
        <span>Food Item ID - {{searchFoodItems.fooditemid}}</span>
    </div>
</div>
// list.directive.html
<div style="margin-top:5px;margin-left:30px;">
    <table class="table table-responsive">
        <thead>
            <tr>
                <th>ID</th>
                <th>Description</th>
                <th>Discount</th>
            </tr>
        </thead>
        <tfoot></tfoot>
        <tbody>
            <tr ng-repeat="row in listFoodItems.fullitemdescs">
                <td>{{row.EntryId}}</td>
                <td>{{row.ItemDesc}}</td>
                <td>{{row.ItemDisc}}</td>
            </tr>
        </tbody>
    </table>
</div>

JS-

// home.js
    (function () {
        'use strict';
        angular
            .module(testConstants.generateName(testConstants.appModule, testConstants.NAMETYPES.module))
            .controller(testConstants.generateName('home', testConstants.NAMETYPES.controller), home);
        home.$inject = ['$scope', '$location', '$routeParams', '$q', '$window', 'logger', 'dataservice'];
        function home($scope, $location, $routeParams, $q, $window, logger, dataservice) {
            var home = this;
            home.changevalue = '';
        }
    })();

// search.js
(function () {
    'use strict';
    angular
        .module(testConstants.generateName(testConstants.appModule, testConstants.NAMETYPES.module))
        .directive(testConstants.generateName('directiveOne', testConstants.NAMETYPES.directive), searchFoodItems);
    searchFoodItems.$inject = ['dataservice', 'logger'];
    function searchFoodItems(dataservice, logger) {
        var sfi = {
            restrict: 'E',
            templateUrl: 'App/search/search.directive.html',
            scope: {
                fooditemid: '='
            },
            link: function (scope, element, attrs, controller) { },
            controller: searchFoodItemsController,
            controllerAs: 'searchFoodItems'
        }
        return sfi;
    }
    searchFoodItemsController.$inject = ['$scope', 'dataservice', 'logger'];
    function searchFoodItemsController($scope, dataservice, logger) {
        var search = this;
        search.fooditemid = '';
        search.fooditems = [];
        search.onSelectionChange = function () {
            $scope.fooditemid = search.fooditemid;
        }
        activate();
        function activate() {
            loadFoodItems();
        }
        function loadFoodItems() {
            return dataservice.getFoodItems().then(function (result) {
                search.fooditems = result;
                logger.log("search.directive.js = getFoodItems loaded");
            });
        }
    }
})();

// list.js
(function () {
    'use strict';
    angular
        .module(testConstants.generateName(testConstants.appModule, testConstants.NAMETYPES.module))
        .directive(testConstants.generateName('directiveTwo', testConstants.NAMETYPES.directive), listFoodItems);
    listFoodItems.$inject = ['dataservice', 'logger'];
    function listFoodItems(dataservice, logger) {
        var lfi = {
            restrict: 'E',
            templateUrl: 'App/list/list.directive.html',
            scope: {
                fooditemid: '='
            },
            link: function (scope, element, attrs, controller) { },
            controller: listFoodItemsController,
            controllerAs: 'listFoodItems'
        }
        return lfi;
    }
    listFoodItemsController.$inject = ['$scope', '$q', 'dataservice', 'logger'];
    function listFoodItemsController($scope, $q, dataservice, logger) {
        var list = this;
        list.fullitemdescs = [];
        activate();
        function watchFoodItem() {
            $scope.$watch("$scope.fooditemid", function (value) {
                $q.all([load(value)]).then(function () { logger.log('list.directive.js - fooditemid changed'); });
            });
        }
        function activate() {
            watchFoodItem();
            load($scope.fooditemid);
        }
        function load(id) {
            if (id === '') {
                loadFoodItems();
            }
            else {
                loadFoodItem(id);
            }            
        }
        function loadFoodItems() {
            return dataservice.getFoodDescDiscs().then(function (result) {
                list.fullitemdescs = result;
                logger.log("list.directive.js = getFoodItems loaded");
            });
        }
        function loadFoodItem(id) {
            return dataservice.getFoodDescDisc(id).then(function (result) {
                list.fullitemdescs = result;
                logger.log("list.directive.js = getFoodItem loaded");
            });
        }
    }
})();