Ember nested routes

I have a model plant and a related model planting which should have urls like:

/plants
/plants/new
/plants/some-plant-id/planting/new  

The route to add planting works in url and displays the correct add form. Problem is the submit with action on planting/new does not work.

Console

ember.debug.js:19699 Uncaught Error: Nothing handled the action 'savePlanting'. 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.

I am guessing the issue is with the way I constructed the route in router.js but not sure. There is only one controller- app/controllers/application.js which is minimal

Here is some of my code

app/routes/planting/new.js

...
actions: {

  savePlanting(newPlanting) {
    newPlanting.save().then(() => this.transitionTo('planting'));
  },
...

router.js

...
this.route('plants', function() {
  this.route('new');
  this.route('edit', { path: '/:plant_id/edit' });

  this.route('planting',  { path: '/plants/:plant_id/planting' },   function(){
    this.route('new');
  });

});
...

Incidentally, my template directories are like

app/templates/plants
app/templates/plants/new.hbs
app/templates/plants/planting/new.hbs  //plantings dir in plants

routes directories are

app/routes/plants
app/routes/planting

What am I doing wrong?