Angular+JQ+Bootstrap

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<div ng-controller="Ctrl1">
    <h2>Ctrl1</h2>
    <ul>
        <li ng-repeat="item in list">{{item}}</li>
    </ul>
</div>
<hr />
<div ng-controller="Ctrl2">
    <h2>Ctrl2</h2>
      <ul>
        <li ng-repeat="item in list">{{item}}</li>
    </ul>
</div>

JavaScript

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

var heavyFunction = function(cb) {
    setTimeout(function() {
        cb([1, 2, 3, 4]);
    }, 1000);
};

app.factory('service', function($q) {
    var items = [];
    var itemsService = {
        done:[],
        onDone : function(fn){
            this.done.push(fn);
        }
    };
    heavyFunction(function(data) {
        console.log(data);
        for (var i = 0; i < itemsService.done.length;i++){
            itemsService.done[i](data);
        }
        
    });

    return itemsService;
});

function Ctrl1($scope, service) {
        service.onDone(function(data){
            //console.log(data);
            $scope.list = data;
           $scope.$apply();
        });
}

function Ctrl2($scope, service) {
    service.onDone(function(data){
        //console.log(data);
        $scope.list = data;
        $scope.$apply();
    });
}