Angular: Empty Fiddle

http://angularjs.org/

by boneskull

HTML

<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<div ng-controller="aCtrl">
    {{modelA.foo}}
</div>
<div ng-controller="bCtrl">
    {{modelB.baz}}
</div>

JavaScript

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

myApp.service('ModelA', function() {
    this.model = {};
});

myApp.service('ModelB', function() {
    this.model = {};
});

myApp.service('ModelC', function() {
    this.model = {};
});

myApp.service('ModelD', function() {
    this.model = {};
});

(function() {
    var baseCtrl = function($scope, ModelA, ModelB, ModelC, ModelD) {
        $scope.modelA = ModelA.model;
        $scope.modelB = ModelB.model;
        $scope.modelC = ModelC.model;
        $scope.modelD = ModelD.model;        
    };
    
    myApp.controller('aCtrl', function($scope, $controller) {
        $controller(baseCtrl, {$scope: $scope});        
        $scope.modelA.foo = 'bar';
    });
    
    myApp.controller('bCtrl', function($scope, $controller) {
        $controller(baseCtrl, {$scope: $scope});        
        $scope.modelB.baz = 'spam';
    });
    
})();