AngularJS Directive: create you first directive

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

  <head>
    <script data-require="angular.js@1.5.3" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="mainCtrl">
    <display-info></display-info>
  </body>

</html>

angular.module('myApp', []);
angular.module('myApp').controller('mainCtrl', function($scope) {
  $scope.user = {
    name: 'Tony Stark',
    alias: 'Iron Man',
    address: {
      street: '10880, Malibu Point',
      city: 'Malibu, Calif',
      country: 'United States',
    },
    teamAffiliation: [
      'Avengers', 'S.H.I.E.L.D', 'Stark Industries', 'Guardians of galaxy'
    ],
    abilities: "Genius-level intellect and highly proficient Scientist, Engineer and business man"
  }
});
angular.module('myApp').directive('displayInfo', function() {
  return {
    templateUrl: "displayInfo.html",
    restrict: "E"
  }
});

/* Styles go here */

Name:{{user.name}}
    <div ng-show='user.address'>
      <h4>Address:</h4> {{user.address.street}}
      <br /> City: {{user.address.city}}
      <br /> Country: {{user.address.country}}
    </div>
    <h4>Team Affiliation:</h4>
    <ul>
      <li ng-repeat="team in user.teamAffiliation">
        {{team}}
      </li>
    </ul>