<!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>
    var qpp = angular.module('myApp', []);

    qpp.factory('myFactory', function() {
      var displayFact;
      
      var addMSG = function(msg) {
        displayFact = ' Hi Anil, This is ' + msg;
      }
      
      return {
        setMSG: function(msg) {
          addMSG(msg);
        },
        getMSG: function() {
          return displayFact;
        }
      };
    });

    qpp.service('myService', function() {
      var displayServ;
      
      var addMSG = function(msg) {
        displayServ = 'Hi Anil, This is ' + msg;
      }

      this.setMSG = function(msg) {
        addMSG(msg);
      }
      
      this.getMSG = function() {
        return displayServ;
      }
    });

    qpp.controller("MyCtrl", function($scope, myService, myFactory) {
      //Inject to factory and controller both.
      myFactory.setMSG("SetFactory");
      myService.setMSG("SetService");

      //Pfrepare a collection
      $scope.myCollections = [
        myFactory.getMSG(),
        myService.getMSG()
      ];
    });
  </script>
</head>

<body ng-app="myApp">
  <div ng-controller="MyCtrl">
    <div ng-repeat="coll in myCollections">
      {{coll}}
    </div>
  </div>
</body>

</html>
// Code goes here

/* Styles go here */