User Full Name directive

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="userFullnameDemo" ng-controller="DemoCtrl as ctrl">
    <h1>
      <user-fullname user="ctrl.currentUser"></user-fullname>
    </h1>
  </body>

</html>

// Code goes here

angular.module('userFullnameDemo', [])
.directive('userFullname', function() {
  return {
    restrict: 'E',
    template: '<span>{{ user.firstname }} {{ user.lastname }}</span>',
    scope: {
      user: '='
    }
  };
})
.controller('DemoCtrl', function() {
  var vm = this;
  vm.currentUser = {
    firstname: "Bob",
    lastname: "Slydell"
  };
});