<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
 <div class="container" style="padding-top:20px;">
 <div ng-app="myApp" ng-controller="myController">
 <p>From Service: {{serviceName}}</p>
 <p>From Factory: {{factoryName}}</p>
 <p>From Provider: {{providerName}}</p>
 </div>
 </div>
</body>
</html>
// Also see $provide usage with angular.config - http://plnkr.co/1hu8be

//defining module
    var app = angular.module('myApp', []);
 
 //defining service
    app.service('myService', function () {
       this.name = '';
       this.setName = function (newName) {
           this.name = newName;
           return this.name;
       };
    });
 
 //defining factory
    app.factory('myFactory', function () {
       var serviceObj = {};
       serviceObj.name = '';
       serviceObj.setName = function (newName) {
           serviceObj.name = newName;
       };
       return serviceObj;
    });
  
 //defining provider
    app.provider('configurable', function () {
           var privateName = '';
           this.setName = function (newName) {
               privateName = newName;
           };
           this.$get = function () {
               return {
                   name: privateName
               };
           };
    });
 
 //configuring provider
    app.config(function (configurableProvider) {
        configurableProvider.setName("Angular Provider Value");
    });

 //defining controller
    app.controller('myController', function ($scope, myService, myFactory, configurable) {
        $scope.serviceName = myService.setName("Angular Service Value");
        myFactory.setName("Angular Factory Value");
        $scope.factoryName = myFactory.name;
        $scope.providerName = configurable.name;
    });
/* Styles go here */