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

Question

我一直在研究这段代码已经很久了，而且我无法弄清楚我做错了什么。我有一个控制器，一个指令，一个服务和一个常量文件。该指令对应于制表符。我希望我的视图能够在标签点击上更新标签和按钮名称。这是我的代码： -

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>

MainCtrl.js

app.controller("MainController", ['emtsBaseService', '$scope', function(emtsBaseService, $scope){
$scope.name="";
$scope.heading={'title': 'Heading 1 initialty', 'buttonHeading' : 'Heading 2 initialty'};

    var self = this;
    self.tabs = [];
    self.addTab = function addTab(tab) {
        self.tabs.push(tab);

        if(self.tabs.length === 1) {
            tab.active = true;
        }
    }
    self.select = function(selectedTab) {
        angular.forEach(self.tabs, function(tab) {
            if(tab.active && tab !== selectedTab) {
                tab.active = false;
            }
        })
        selectedTab.active = true;
        $scope.setId(selectedTab.id);
    }

    $scope.setId = function(h){
        console.log(h);
        $scope.heading = emtsBaseService.getTabNames(h);
        console.log($scope.heading);
    }
    console.log($scope.heading);

}]);

emtsBaseService.js： -

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

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

}]);

tabset模板： -

<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>

制表directive.js

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'
}
})

constants.js： -

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"
        }
    });

根据要求，标签和按钮标题应该改变，但它没有改变..请帮忙