AngularJS tabs and hotkeys combination

Question

I am trying to use the hotkeys to change the tabs in AngularJS. I am new to AngularJS but i am sure it should be as simple as the code below. So when a hotkey is pressed, it is unable to change the tab activeness. It is basically doing nothing for now but when 't' is pressed, it should display the tab2 content.

I created a keybinding directive which invokes a function and uses Mousetrap to use the keyboard shortcuts.So when the hotkey 't' is pressed, I am able to invoke the function and change the tab active to true but I am unable to show the changes in the View.

This is my html file

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

This is app.js file

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

Here's a Plunker.