accessing property in wrapped component

I have a simple component like this:

# app/components/outer-component.js
import Ember from 'ember';

export default Ember.Component.extend({
  counter: 1
});

with its template defined as

# app/templates/components/outer-component.hbs

and I want to render it inside of template like this

# app/templates/application.hbs


  

The counter is however not being render here and I think that's because the context is set to outer context. How do I render a component like this and enforce it to use the component scope?

Here's a gist of my problem.