如何在Angularjs中强制从指令事件中更新视图

我有一个工作，坚持了2天。希望每个知道angularjs的人都能帮助我:)。我需要强制改变html时，对模型的变化。例子:

    <!--CAKE LIST-->
    <div id="cakelist" ng-controller="CakeListCtrl">
        <ul class="thumbnails cake-rack" cakes="cakes" ng-model="cakesModel">
<li class="pull-left cake-unit" ng-repeat="cake in cakes" cake="cake">
    <div class="thumbnail">
        <a href="{{cake.link}}">
            <img ng-src="{{cake.avatar}}" alt="{{cake.title}}" class="img img-rounded img-polaroid" />
        </a>
        <h5 class="pull-left">
            <a href="{{cake.link}}">{{cake.title}}</a>
        </h5>
        <a href="{{cake.linksearch}}" class="pull-right shared">Shared</a>
        <div class="clearfix"></div>
        <ul class="attrs unstyled">
            <li>
                <div class="pull-left">Mã sản phẩm</div>
                <span class="pull-right">{{cake.type}}</span>
            </li>
        </ul>
    </div>
</li>
        </ul>
        <input type="button" class="btn btn-primary" value="add more cake" class="cake-more" ng-click="addCake()" />
        <input type="button" class="btn btn-danger" value="clear cake" class="cake-clear" ng-click="clear()" />
        <img alt="Loading" src="/imagesroot/ajax-loader-1.gif" loading-stage="loadingStage" class="cake-loading"/>
    </div>

现在在控制器外有一个菜单:

<div id="cake-catalog" class="cake-catalog">
    <ul class="nav">
        <li class="active">
            <a cake-menu-unit href="sacmscategory50c2302b7ff0a">Nhân vật hoạt hình</a>
        </li>
        <li>
            <a cake-menu-unit href="sacmscategory50c2308717a84">Động vật</a>
        </li>
        <li>
            <a cake-menu-unit href="sacmscategory50c2309da00f6">Tạo hình 3D</a>
        </li>
        <li>
            <a cake-menu-unit href="sacmscategory50c230ba08d9d">Các mẫu hình khác</a>
        </li>
    </ul>
</div>

我有angular模块添加和清除:

var CakeList = angular.module('CakeList', ['ngResource']);
CakeList.service('CakeService', function($rootScope) {
    var cakedata = [{avatar:"test", title: "test2"}];
    $rootScope.loadCake = false;
    var bf = function() { $rootScope.loadCake=true; };
    var at = function() { $rootScope.loadCake=false; };
    return {
        cakes: function() {
            bf();
            at();
            return cakedata;
        },
        addCake: function() {
            bf();
            cakedata.push(cake);
at();
        },
        clear: function() {
            cakedata = []; console.log('clear');
        }
    };
});
CakeList.directive('cakeCatalog', function($rootScope, CakeService) {
    var clickfn = function(e) {
        e.preventDefault();
        CakeService.clear();
    };
    var nonclickfn = function(e) {
        e.preventDefault();
        console.log('nonclickfn');
    };
    return {
        restrict: "C",
        link: function(scope, element, attrs) {
            $rootScope.$watch('loadCake', function(newValue, oldValue) {
                if (newValue===true) {
                    element.find('a').off('click').on('click', nonclickfn);
                }
                else {
                    element.find('a').off('click').on('click', clickfn);
                }
            });
        }
    };

但是当运行时，我点击菜单的一个元素，然后列表不清楚，即使我在控制台框中检查console.log，看到蛋糕数据真的很清楚!你能帮我这个案子吗?:)