Returning albums array to Ember Route But {{#each}} not working

Started learning ember. Trying to display list of albums in application.hbs. After returning the array values in Routes, I am not getting array object in {{#each}}. Please let me know what I am doing wrong.

Routes

import Ember from 'ember';
import albums from 'bumbox/models/album-fixtures';

export default Ember.Route.extend({
  model: function() {
    return albums;
  }
});

album-fixtures.js

export default [{
  id: "1",
  artwork: "images/the-morning-after.jpg",
  name: "The Morning After",
  artist: "GOLDHOUSE",
  isExplicit: false,
  songs: [ "11", "12", "13", "14" ]
}, {
  id: "2",
  artwork: "images/dusk-to-dawn.jpg",
  name: "Dusk to Dawn",
  artist: "Emancipator",
  isExplicit: false,
  songs: [ "21", "22", "23", "24" ]
}, {
  id: "3",
  artwork: "images/the-heist.jpg",
  name: "The Heist",
  artist: "Macklemore & Ryan Lewis",
  isExplicit: true,
  songs: [ "31", "32", "33", "34" ]
}, {
  id: "4",
  artwork: "images/some-nights.jpg",
  name: "Some Nights",
  artist: "fun.",
  isExplicit: true,
  songs: [ "41", "42", "43", "44" ]
}];

application.hsb

<div class="album-list">
{{#each}}
  <div class="album">
    <a class="ember-view" href="/album/1">
      <img src="{{artwork}}">
    </a>
    <p class="album-name">{{name}}</p>
    <p class="album-artist">{{artist}}</p>
    <p class="song-count">{{songs}}</p>
  </div>
{{/each}}
</div>

You need to use {{#each model as |album|}} to iterate the model array. The template should look like this:

{{#each model as |album|}}
  <div class="album">
    <a class="ember-view" href="/album/1">
      <img src="{{album.artwork}}">
    </a>
    <p class="album-name">{{album.name}}</p>
    <p class="album-artist">{{album.artist}}</p>
    <p class="song-count">{{album.songs}}</p>
 </div>
{{/each}}

Twiddle Example https://ember-twiddle.com/e1257c2778df8eb46168da67b02ab13c?openFiles=templates.application.hbs%2C