使用 md-tabs 更改 md-selected 并使用 md-button (prev, next)

Question

在使用更改标签索引的不同方法切换标签时，我遇到了一种奇怪的行为。我可以通过 ng-click 使用 $scope.changeQuestion 函数更改 md-selected。我还可以使用 md-tab 的内置点击来更改md-selected。 问题出在我单击 md 选项卡，然后尝试单击使用 $scope.changeQuestion 功能的上一个或下一个按钮。如果我单击选项卡然后尝试使用我的按钮更改索引，则按钮不再更改选项卡索引。但是，它们确实记录了我想切换到的适当索引。

控制器

$scope.changeQuestion = function(index){
     $scope.selectedQuestion = index;
};

html

<md-tabs md-selected='selectedQuestion' md-stretch-tabs md-dynamic-height md-border-bottom>
        <md-tab ng-repeat='question in assessment.questions | toArrayKeepKeys | orderBy: "order"'>
            <md-tab-label>
                {{question.order}} <i class="fas fa-fire fire" ng-if='question.bonus'></i>
            </md-tab-label>
            <md-tab-body>
                <div class='question-tab-content'>
                    <question class='margin-top-1em' details='question' answer='answers[question.key]'></question>
                    <div>
                        <md-button ng-click='changeQuestion($index - 1)' ng-hide='question.order === 1' class='md-primary md-raised no-left-margin'>Previous</md-button>
                        <md-button ng-click='changeQuestion($index + 1)' ng-hide='question.order === _.size(assessment.questions)' class='md-primary md-raised no-left-margin'>Next</md-button>
                    </div>
                </div>
            </md-tab-body>
        </md-tab>
    </md-tabs>

以下是行为示例：

我能够获得working example in codepen，但似乎无法在我的项目中使用它。

更新

尝试将 $watch 放在 $scope.selectedQuestion 上，如果我单击选项卡，它不会触发。就像 md-selected='selectedQuestion' 和 $scope.selectedQuestion 是不同的，但只有在我单击一个选项卡之后。

Answer 1

找到解决方案： scope inheritance

将 $scope.selectedQuestion = 0; 更改为 $scope.selectedQuestion = { selected: 0 }; 并更新其他引用就可以了。

无法解释：为什么 codepen example 无需修改解决方案即可工作