Creating a custom directive

(function(angular) {
  'use strict';
  var app = angular.module('wdsApp', []);
  
  app.controller('MainCtrl', ['$scope', function($scope) {
    $scope.wds = {
      name : "WDS, A Xerox Company",
      address : "Aperia, 8 Kallang Ave"
    }
  }]);
  
  app.directive('wdsCustom', function() {
    return {
      templateUrl: 'wds-custom-directive.html',
      restrict: 'E',
      scope: {
        myCompany: '=company'
      }
    };
  });
})(window.angular);

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

  <head>
    <meta charset="utf-8" />
    <title>AngularJS</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl" style="background-color:black; color: white"> 
    <wds-custom company="wds" ></wds-custom>
  </body>

</html>

<div>
  <h1>Welcome to an Introduction to AngularJS directives ,  {{myCompany.name}}</h1>  
</div>