AngularJS ngList and ngPluralize Interaction

Simple fiddle to show how these components work and interact.

by Akram kamal

HTML

<div ng-app="Example">
    
    <div ng-controller="DirectiveController">
        <p>Type in a list of comma ( , ) separated names.</p>
        <textarea ng-model="people" ng-list=","></textarea>
        
        <p>JSON Version:</p>
        <pre>{{ people | json }}</pre>
        
        <p>Pluralized Output:</p>
        <ng-pluralize count="people.length" offset="2" when="{
            '0': 'Nobody is in the array.',
            '1': '{{person1}} is in the array.',
            '2': '{{person1}} and {{person2}} are in the array.',
            'one': '{{person1}}, {{person2}} and one other person are in the array.',
            'other': '{{person1}}, {{person2}} and {} other people are in the array.'}">
</ng-pluralize>
    </div>
    
</div>

JavaScript

angular.module('Example', [])
    .controller('DirectiveController', [
        '$scope',
        function ($scope) {
            $scope.people = [];
            
            $scope.$watch('people', function () {
                $scope.person1 = ($scope.people[0] ? $scope.people[0] : null);
                $scope.person2 = ($scope.people[1] ? $scope.people[1] : null);
            })
        }
    ]);