angular.module('telavox.test', []) .controller('MyCommonController', function($scope) { $scope.mylist = ['Item 1', 'Item 2', 'Item 3']; }) .controller('MyListLengthAddedController', function($scope) { $scope.myListLengthAdded = $scope.mylist.length + 1; }) .controller('MyListLengthController', function($scope) { $scope.myListLength = $scope.mylist.length; });
<div ng-app="telavox.test"> <div data-ng-controller="MyCommonController"> <div data-ng-controller="MyListLengthAddedController"> If I added one element, the list length would be {{myListLengthAdded}}. </div> <div 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; } }