Javascript 控制器中的数据更新，但不反映回

我已经在这段代码上工作了很长时间，但我无法找出我做错了什么。我有一个控制器、一个指令、一个服务和一个常量文件。该指令对应于选项卡。我希望我的视图在单击选项卡时更新选项卡和按钮名称。这是我的密码：-

homepage.html：-

<tabset> <tab heading="{{heading.title}}" id="heading1">
        <div class="row" style="padding: 20px;">
            <div class="col-md-3">
            {{heading.title}} hahah
                <thumbnail></thumbnail><br>
            </div>
            <div class="col-md-3">
                <thumbnail></thumbnail><br>
            </div>
            <div class="col-md-3">
                <thumbnail></thumbnail><br>
            </div>
            <div class="col-md-3">
                <thumbnail></thumbnail><br>
            </div>
        </div>
        </tab> <tab heading="{{heading.title}}" id="heading2">
        <div class="row" style="padding: 20px;">
            <div class="col-md-3">
                <thumbnail></thumbnail>
            </div>
            <div class="col-md-3">
                <thumbnail></thumbnail>
            </div>
            <div class="col-md-3">
                <thumbnail></thumbnail>
            </div>
            <div class="col-md-3">
                <thumbnail></thumbnail>
            </div>
        </div>
        </tab> </tabset>
    </div>
    <div class="col-md-2 col-sm-2 col-xs-2" style="margin-top: 0px;">
        <a href="index.html#!/allSim" type="button" class="btn btn-danger"> <i
            class="glyphicon glyphicon-plus"></i>&nbsp;{{heading.buttonHeading}}
        </a>
    </div>

emtsBaseService.js：-

app.service('emtsBaseService', ['tabHeadings', function(tabHeadings){
var s = this;

s.getTabNames = function(heading){
    return tabHeadings[heading];
};

}]);

选项卡集模板：-

<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" ng-repeat="tab in tabset.tabs"
        ng-class="{'active': tab.active}"><a href="" role="tab"
        ng-click="tabset.select(tab)">{{tab.heading}}</a>
    </li>
</ul>
<ng-transclude></ng-transclude>
</div>

---

根据要求，选项卡和按钮标题应该更改，但不会更改。。请帮助

添加一个plunker以帮助诊断。我强烈建议创建一个plunker或其变体来说明您的问题。它可能在那里不起作用，但它将更好地帮助您诊断问题，同时也为试图提供帮助的人提供了一个起点。@Jones博士：这是我在plunker能想到的。

<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" ng-repeat="tab in tabset.tabs"
        ng-class="{'active': tab.active}"><a href="" role="tab"
        ng-click="tabset.select(tab)">{{tab.heading}}</a>
    </li>
</ul>
<ng-transclude></ng-transclude>
</div>

angular.module('tabsDirectiveModule', [])
.directive('tab', function() {
return {
    restrict: 'E',
    transclude: true,
    template: '<div role="tabpanel" ng-if="active" ng-transclude></div>',
    require: '^tabset',
    scope: {
        id: '@',
        heading: '@'
    },
    link: function(scope, elem, attr, tabsetCtrl) {
        scope.active = false
        tabsetCtrl.addTab(scope)
    }
    }
 })
 .directive('tabset', function() {
return {
    restrict: 'E',
    transclude: true,
    scope: { },
    templateUrl: 'UI/templates/tabset.html',
    controllerAs: 'tabset',
    controller: 'MainController'
}
})

app.constant(
    "tabHeadings", {
        "heading1": {
            "title":"My Performance Study",
            "buttonHeading":"Create Performance Study"
        },
        "heading2": {
            "title":"Locomotives",
            "buttonHeading":"Create Locomotives"
        },
        "heading3": {
            "title":"Users",
            "buttonHeading":"Create Users"
        },
        "heading4": {
            "title":"Customers",
            "buttonHeading":"Create Customers"
        }
    });