Edit in JSFiddle

angular.module('telavox.test', [])
.factory('MySimulatedSlowHTTPService', function($q, $timeout) {
    var myservice = {};
    myservice.refresh = function() {
        var deferred = $q.defer();
        $timeout(function() {
            // Simulated slow fetch from an HTTP server
            
            var randomnumber=Math.floor(Math.random()*11)
            var randomLengthList = ['Item 1']
            for (var i=0; i < randomnumber; i++) {
                randomLengthList = randomLengthList.concat(randomLengthList)
            }
            
            deferred.resolve(randomLengthList)
        }, 3000);
        myservice.listPromise = deferred.promise;
        return deferred.promise;
    }
    myservice.refresh();
    return myservice;
})
.controller('MyListLengthAddedController', function($scope, $timeout, MySimulatedSlowHTTPService) {
    $scope.myservice = MySimulatedSlowHTTPService; // Needed to watch its promises
    $scope.watchCallbackCalls = 0;
    $scope.$watch('myservice.listPromise', function() {
        $scope.watchCallbackCalls++;
        MySimulatedSlowHTTPService.listPromise.then(function(mylist) {
            $scope.myListLengthAdded = mylist.length + 1;
        });
    });
    
    $timeout(function() {
        MySimulatedSlowHTTPService.refresh();
    }, 10000);
})

<div ng-app="telavox.test">
    <div>
        <div class="controller" data-ng-controller="MyListLengthAddedController">
            If I added one element, the list length would be {{myListLengthAdded}}.<br/>
            My watch callback was called {{watchCallbackCalls}} times.
        </div>
    </div>
</div>

</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;
}