Angularjs：问题保持模型和URL同步

Question

我在标准网站（不是单页应用）的页面的一部分上使用角度

我有以下js和html代码：

JS

App.controller('AppCtrl', ['$scope', '$location',
    function($scope, $location) {
        $scope.fruit = 'Apple';

        $scope.selectFruit = function(fruit) {
            $scope.fruit = fruit;
        }
    }
}

HTML

<ul>
    <li><a id="cherry" href="#cherry" ng-click="selectFruit('cherry')">Cherry</a></li>
    <li><a id="banana" href="#banana" ng-click="selectFruit('banana')">Banana</a></li>
    <li><a id="grape"  href="#grape"  ng-click="selectFruit('grape')">Grape</a></li>
</ul>

如果我按此顺序点击链接，樱桃 - ＆gt;香蕉 - ＆gt;葡萄，网址会相应改变 正如预期的那样使用网址中的＃{fruit}。

当我点击浏览器的后退按钮一次时，网址将按相反顺序更改，在本例中，从#grape更改为#banana

然而，$ scope.fruit的价值仍然是葡萄。

如何更新$ scope.fruit的值以匹配url（#banana）'angular way'？我应该听取$ location的变化（好像是黑客）还是我只是错误地构建了整个东西？