AngularJS Example:

by Ztyx

HTML

<div ng-app="telavox.test">
    <div>
        <div class="controller" data-ng-controller="MyListLengthAddedController">
            If I added one element, the list length would be {{myListLengthAdded}}.
        </div>
        <div class="controller" data-ng-controller="MyListLengthController">
            My current list length is {{myListLength}}.
        </div>
    </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<style>
.error {
    color: red;
}
.controller {
    border: thin solid green;
    padding: 0.3em;
    margin: 0.3em;
}

JavaScript

angular.module('telavox.test', [])
.factory('MySimulatedSlowHTTPService', function($q, $timeout) {
    var deferred = $q.defer();
    $timeout(function() {
        // Simulated slow fetch from an HTTP server
        deferred.resolve(['Item 1', 'Item 2', 'Item 3'])
    }, 3000);
    return deferred.promise;
})
.controller('MyListLengthAddedController', function($scope, MySimulatedSlowHTTPService) {
    MySimulatedSlowHTTPService.then(function(mylist) {
        $scope.myListLengthAdded = mylist.length + 1;
    });
})
.controller('MyListLengthController', function($scope, MySimulatedSlowHTTPService) {
    MySimulatedSlowHTTPService.then(function(mylist) {
        $scope.myListLength = mylist.length;
    });
});