How to add an API to a directive (web component)

var app = angular.module('plunker', []);

app.controller('MainController', function() {
  var vm = this;
  vm.webComponentApi = null;
  
  vm.changePerson = function(){
    var someNewPerson = {
      name: 'Juri'
    };
    
    vm.webComponentApi.setPerson(someNewPerson);
  }
});


// the directive
app.directive('myWebComponent', function(){
  return {
    restrict: 'E',
    scope: {},
    bindToController: {
      api: '='
    },
    template: [
      '<div>',
      '{{ vm.person.name }}',
      '</div>'
    ].join(' '),
    controller: function(){
      var vm = this;
      vm.person = {
        name: '(default person)'
      };
      
      // the API of my web component
      vm.api = {
        setPerson: function(newPerson){
          vm.person = newPerson;
        }
      };
      
    },
    controllerAs: 'vm'
  };
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.1/angular.js" data-semver="1.4.1"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainController as main">
    
    <my-web-component api="main.webComponentApi"></my-web-component>
    
    
    <button ng-click="main.changePerson()">Change person through "API"</button>
    
  </body>

</html>