Ember losing active trail

Hi I have the following Routes in ember:

App.Router.map(function(){

    this.resource('meat', function() {
        this.resource('poultry', function() {
            this.route('chicken');
            this.route('duck');
        });
    });
});

My templates look like this:

<script type='text/x-handlebars' id='meat'>       
        <div>{{outlet}}</div>
    </script>


    <script type='text/x-handlebars' id='poultry'>
          Poultry
          <br/><br/>
            {{#link-to 'poultry.chicken'}}Chicken{{/link-to}}
            {{#link-to 'poultry.duck'}}Duck{{/link-to}}

          <br/><br/>
          <div>
            {{outlet}}
          </div>
    </script>

    <script type="text/x-handlebars" id="poultry/chicken">
        <h4>Chicken</h4>
    </script>

    <script type="text/x-handlebars" id="poultry/duck">
        <h4>Duck</h4>
    </script>

The problem is, when I click on the 'Duck' link, I lose my active trail to 'Poultry'.

I can't figure it out, the path is correct, but the active classes are gone.

Here is a jsbin: http://ift.tt/1DNEWiO

Thanks!