Controller fails to be called

I have recently started learning ember.js and for some reason i cant get my controller to be called

App = Ember.Application.create();

App.Router.map(function() {
  this.route('about');
});

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

App.IndexController = Ember.Controller.extend({
    sortedModel : function(){
        alert("this works");
    }
});

app.js

<script type="text/x-handlebars" id="index">
    <ul>
    
      <li></li>
    
    </ul>
  </script>

its probably something really stupid but for the life of me i cant seem to see it, i followed the tutorial to the letter and cant continue without it