Angular: Empty Fiddle

http://angularjs.org/

by witq

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<div ng-controller="FirstCtrl" class="ctrl">
    <p>FirstCtrl:</p>
    <pre ng-bind="horse1 | json"></pre>
    <pre ng-bind="horse2 | json"></pre>
    <p>horse1 === horse2: {{ horse1 === horse2 }}</p>
    <button ng-click="setName()">Set name</button>
</div>

<div ng-controller="SecondCtrl" class="ctrl">
    <p>SecodnCtrl:</p>
    <pre ng-bind="horse2 | json"></pre>
    <pre ng-bind="horse3 | json"></pre>
    <input type="text" ng-model="horse2.name">
</div>

CSS

.ctrl {
    background: #fefefe;
    padding: 8px;
    margin: 10px;
}
pre {
    background: #f4f4f4;
    margin: 5px 0;
}

JavaScript

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

var Horse = function() {
    this.type = 'Horse';
    this.name = 'Jake';
};

Horse.prototype.setName = function(name) {
    this.name = name;
};

var Cow = function() {

    var name,
        type = 'cow',
        setName = function(name) {
            name = name;
        },
        getName = function() {
            return name;
        };
    
    return {
        getName: getName,
        setName: setName
    };
    
};

myApp.service('HorseService', Horse);
myApp.factory('CowFactory', function() {
    return new Cow();
});

myApp.controller('FirstCtrl', function($scope, HorseService) {

    $scope.horse1 = HorseService;
    $scope.horse2 = HorseService;
    
    $scope.setName = function() {
      HorseService.setName('Lemongrab');  
    };
    
});

myApp.controller('SecondCtrl', function($scope, HorseService) {

    $scope.horse2 = HorseService;
    
});