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; }); }) .controller('MyListLengthController', function($scope) { $scope.$watch('mylist', function() { $scope.myListLength = $scope.mylist.length; }); });
<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>
</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; }