Count number of users in ember.js

I have an ember application which keeps track of a collection of users. I have a computed property which is supposed to keep track of the number of users in the system in my usersController.js:

App.UsersController = Ember.ArrayController.extend({
  sortProperties: ['name'],
  sortAscending: true 

usersCount: function(){
    return this.get('model.length');
  }.property('@each')

});

I'm trying to render this in my users template, which looks like this-

<script type = "text/x-handlebars" id = "users">

<div class="col-md-2">
{{#link-to "users.create"}}<button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-plus"></button> {{/link-to}}

<div>Users: {{usersCount}}</div>
</div>
<div class="col-md-10">

  <ul class="list-group">
  {{#each user in controller}}
  <li class="list-group-item">
    {{#link-to "user" user}}
      {{user.name}}
    {{/link-to}}
  </li>
{{/each}}

</ul>

{{outlet}}
</div>
</script>

but it doesn't show the count. Why would this be?

If you want to observe the array itself and don't care about the values in it, your property should observe 'model.[]' instead, like

}.property('model.[]')

Example fiddle

Array docs