Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.0.js"></script>
<div ng-controller="MyCtrl">
    {{foobars}}
</div>

JavaScript

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

myApp.factory('fooFactory', function() {
    var fooVar;
    var addHi = function(foo){
        fooVar = 'Hi '+foo;
    }
    return {
        setFoobar: function(foo){
            addHi(foo);
        },
        getFoobar:function(){
            return fooVar;
        }
    };
});

myApp.service('fooService', function() {
    var fooVar;
    var addHi = function(foo){
        fooVar = 'Hi '+foo;
    }
    this.setFoobar = function(foo){
        addHi(foo);
    }
    this.getFoobar = function(){
        return fooVar;
    }
});
    
function MyCtrl($scope, fooService, fooFactory) {
    fooFactory.setFoobar("fooFactory");
    fooService.setFoobar("fooService");
    
    //foobars = "Hi fooFactory, Hi fooService"
    $scope.foobars = [
        fooFactory.getFoobar(),
        fooService.getFoobar()
    ];
}