Simple hello world angular plnk.

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

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script data-require="angular.js@1.2.4" data-semver="1.2.4" src="http://code.angularjs.org/1.2.4/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body>
  <div ng-controller="MainCtrl">
  
    <helloworld />
    
  </div>
  <div ng-controller="SecondCtrl">
    <helloworld />
    
  </div>
    
  </body>

</html>

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

app.controller('MainCtrl', function($scope, myService,myFactory,myProvider){
  $scope.service_name = myService.sayHello();
  myFactory.set("brandnew name");
  $scope.factory_name = myFactory.sayHello();
  $scope.provider_name = myProvider.sayHello();
});

app.controller('SecondCtrl', function($scope, myService,myFactory){
  $scope.service_name = myService.sayHello();
  $scope.factory_name = myFactory.sayHello();
 });

app.directive('helloworld',function(){
  return {
    template: 'Service {{service_name}}'+
      '<br />Factory {{factory_name}}'+
      '<br />Provider {{provider_name}}',
    restrict: 'E',
  };
});

app.service('myService', function() {
  // service is just a constructor function
  // that will be called with 'new'
  var name = 'service'
  this.sayHello = function() {
     return "Service says " + name + "!";
  };
});

app.factory('myFactory', function() {

  // factory returns an object
  // you can run some code before
  
  return {
    set: function(new_name){
      this.name = new_name;
    },
    name: "factory name",
    sayHello : function(name) {
      return "Factory says " + this.name + "!";
    }
  }
});

var providerService = function(){
  
  this.$get = function(){
    return {
      set: function(new_name){
        this.name = new_name;
      },
      name: "factory name",
      sayHello : function(name) {
        return "Provider says " + this.name + "!";
      }
    }
  };
}

app.config(function($provide){
 $provide.provider('myProvider',providerService);  

});

/* Styles go here */

This simple directive insert a scope variable into a template.