javascript - AngularJS のタブとホットキーの組み合わせ

Question

ホットキーを使用して AngularJS のタブを変更しようとしています。私は AngularJS を初めて使用しますが、以下のコードのように単純である必要があると確信しています。そのため、ホットキーを押しても、タブのアクティブ性を変更できません。今のところ基本的に何もしていませんが、't' を押すと、tab2 のコンテンツが表示されるはずです。

関数を呼び出し、Mousetrap を使用してキーボード ショートカットを使用するキーバインド ディレクティブを作成しました。そのため、ホットキー 't' を押すと、関数を呼び出してアクティブなタブを true に変更できますが、変更を表示できません。ビューで。

これは私のhtmlファイルです

 <div ng-controller="TabsDemoCtrl">

 <keybinding on="t" invoke="hotkey()"></keybinding>
 <tabset>
  <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active">
   {{tab.content}}
  </tab>
 </tabset>
</div>

これはapp.jsファイルです

  var app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
  app.controller('TabsDemoCtrl', function ($scope, $window) {
  $scope.tabs = [
   { title:'Dynamic Title 1', content:'Dynamic content 1' },
   { title:'Dynamic Title 2', content:'Dynamic content 2'}
    ];

  $scope.hotkey = function(){
   $scope.tabs[1].active=true;
        }
  });

   app.directive('keybinding', function () {
    return {
      restrict: 'E',
     scope: {
         invoke: '&'
     },
    link: function (scope, el, attr) {
        Mousetrap.bind(attr.on, scope.invoke);
    }
 };
 });

これがプランカーです。