Ember js -Model in Application Route not loading

Am new to ember and am trying out a few things Please Help

JS:

App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return ['red', 'yellow', 'blue'];
  }
});

App.ApplicationRoute=Ember.Route.extend({
  model:function() {
    return ['Home','Features','About'];
  },
  setupController: function(controller) {
    controller.set('title', "Hello world!");
  },
});

Here under ApplicationRoute have added model

Template:

  <script type="text/x-handlebars">
    <h2>Welcome to Ember.js</h2>
    {{model}}
    {{outlet}}   
  </script>

  <script type="text/x-handlebars" data-template-name="index">
    <ul>
    {{#each model as |item|}}
      <li>{{item}}</li>
    {{/each}}
    </ul>   
  </script>

under the first template have tried to output the model but is not displayed in the output

Output:

Welcome to Ember.js

red
yellow
blue