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

Question

使用不同的更改选项卡索引的方法切换选项卡时，我遇到了一个奇怪的行为。我可以使用带有 ng-click 的 $scope.changeQuestion 函数更改 md-selected。我还可以使用内置的 md-tab 单击来更改 md-selected。 问题出在 我单击 md-tab 然后尝试单击使用 $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.selectedQuestion = 0; 更改为 $scope.selectedQuestion = { selected: 0 }; 并更新其他引用就成功了。

无法解释：为什么 codepen example 在没有修改解决方案的情况下工作

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

changing md-selected with md-tabs and using md-button (prev, next)

angularjs-material