AngularJS Example:

by Ztyx

HTML

<div ng-app="telavox.test">
    <div class="controller" data-ng-controller="MyCommonController">
        <div data-ng-repeat="item in mylist">
            {{item}}
        </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', [])
.controller('MyCommonController', function($scope, $timeout) {
    $scope.mylist = ['Item 1', 'Item 2', 'Item 3'];
    $timeout(function() {
        $scope.mylist.push('Item 4');
    }, 3000);
})
.controller('MyListLengthAddedController', function($scope) {
    $scope.$watch('mylist', function() {
        $scope.myListLengthAdded = $scope.mylist.length + 1;
    }, true);
})
.controller('MyListLengthController', function($scope) {
    $scope.$watch('mylist', function() {
        $scope.myListLength = $scope.mylist.length;
    }, true);
});