ember js - controller action not invoked

I have the following controller code:

var App = Ember.Application.create();


App.DocumentController = Ember.Controller.extend({  
  actions:{
    test:function(){
      console.log('test');
    }
  }
});

This the form:

div class="form-horizontal form-group form-group-lg row">
    <div class="col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-1 col-md-5 col-md-offset-2">
      {{input type="text" value=name class="form-control" placeholder="Name of document." autofocus="autofocus"}}
    </div>
    <div class="col-xs-10 col-xs-offset-1 col-sm-offset-0 col-sm-4 col-md-3">
         <button class="btn btn-primary btn-lg btn-block" {{action 'firstAction'}}>Create Document</button>
    </div>

</div>

{{#if responseMessage}}
  <div class="alert alert-success">{{responseMessage}}</div>
{{/if}}

When clicking the button, the debugger outputs:

Nothing handled the action 'firstAction'. If you did handle the action, this error can be caused by returning true from an action handler in a controller, causing the action to bubble

Not sure what the problem is - the route code:

Router.map(function() {  
  this.resource( 'index', { path: '/' } );
  this.route('decisions');
  this.route('teams');
  this.route('about');
  this.resource("documents",{ path: '/documents' }, function() {            
        this.route('/show', {path: '/show/:id'});
        this.route('/edit', {path: ':id/edit'});
  });
});

The model code:

import DS from 'ember-data';

export default DS.Model.extend({  
  name: DS.attr('String'),
  url: DS.attr('String'),
  text: DS.attr('String')  
});

I know ember has a strict naming convention, but I generated the resource (documents) from the ember-cli using the naming convention in their tutorials. How do I get the template hbs code to talk to the controller?