使用Angularjs切换选项卡时更改URL

Question

我正在尝试修改http://angularjs.org/上的最后一个示例（创建组件），以便在切换选项卡时，网址会发生变化。完整的代码：

angular.module('components', [])

.directive('tabs', function ($location) {
return {
    restrict: 'E',
    transclude: true,
    scope: {},
    controller: function ($scope, $element) {
        var panes = $scope.panes = [];

        $scope.$watch(function () {
            return $location.path();
        }, function (url) {
            //select pane
        });

        $scope.select = function (pane) {
            angular.forEach(panes, function (eachPane, key) {
                eachPane.selected = false;
                if (pane == eachPane) {
                    if (key == "1") {
                        $location.path("Pluralization");
                    } else {
                        $location.path("Localization");
                    }
                }
            });
            pane.selected = true;
        };

        this.addPane = function (pane) {
            panes.push(pane);
            console.log("addPane");
            if (panes.length == 2) {
                if ($location.path() == "/Pluralization") {
                    $scope.select(panes[1]);
                } else {
                    $scope.select(panes[0]);
                }
            }
        }
    },
    template:
        '<div class="tabbable">' +
        '<ul class="nav nav-tabs">' +
        '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">' +
        '<a href="" ng-click="select(pane)">{{pane.title}}</a>' +
        '</li>' +
        '</ul>' +
        '<div class="tab-content" ng-transclude></div>' +
        '</div>',
    replace: true
};
})

.directive('pane', function () {
return {
    require: '^tabs',
    restrict: 'E',
    transclude: true,
    scope: {
        title: '@'
    },
    link: function (scope, element, attrs, tabsCtrl) {
        tabsCtrl.addPane(scope);
    },
    template:
        '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
        '</div>',
    replace: true
};
})

angular.module('app', ['components'])

.controller('BeerCounter', function ($scope, $locale) {
$scope.beers = [0, 1, 2, 3, 4, 5, 6];
if ($locale.id == 'en-us') {
    $scope.beerForms = {
        0: 'no beers',
        one: '{} beer',
        other: '{} beers'
    };
} else {
    $scope.beerForms = {
        0: 'žiadne pivo',
        one: '{} pivo',
        few: '{} pivá',
        other: '{} pív'
    };
}
});

除非用户使用点击返回历史记录按钮，否则内容不会改变。我有

    $scope.$watch(function () {
        return $location.path();
    }, function (url) {
        //select tab according to url
    });

观看网址更改但无法正常工作。我的逻辑是当url更改（通过返回按钮）窗格时应根据url选择。我也认为这部分

       if (panes.length == 2) {
            if ($location.path() == "/Pluralization") {
                $scope.select(panes[1]);
            } else {
                $scope.select(panes[0]);
            }
        }

不应该在addPane（）

中

无论如何，我是Angular的新手，如果你认为有更好的方法，请告诉我。