<html ng-app="testApp">
  <head></head>
  <body ng-controller="testController">
    <hello-world name="{{name}}" />
  </body>
</html>
var app = angular.module("testApp", []);

app.controller("testController", function($scope) {
  $scope.name = "Chris Harrington";
});

app.directive("helloWorld", function() {
    return {
        restrict: "E",
        template: "<div>Hello, {{name}}!</div>",
        scope: {
          name: "@"       
        }
    };
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js