Angular Component Bindings Undefined
<p>I'm trying to put together my first angular component with ngRoute and so far I'm unable to get data to resolve.
config:</p>

<pre><code>.when('/myfirstcomponent', {
    template: '&lt;myfirstcomponent claimKeys="$resolve.claimKeys"&gt;&lt;/myfirstcomponent&gt;',
    resolve: {
        claimKeys: ['$http', function($http) {
            $http.get('server/claimkeys.json').then((response) =&gt; {
                var claimKeys = response.data.DATASET.TABLE;
                return claimKeys;
            });
        }]
    }
})
</code></pre>

<p>Component:</p>

<pre><code>    .component('myfirstcomponent', {
        bindings: {
            'claimKeys': '@'
        },
        templateUrl: 'components/component.html',
        controller: [function() {
            this.$onInit = function() {
                var vm = this;
                console.log(vm.claimKeys);
            };


        }]
</code></pre>

<p>The html for the component simply has a p element with some random text that's all.</p>

<p>I can see when debugging that I am retrieving data but I cannot access it on the component controller... </p>

<p>EDIT: Thanks to the accepted answer below I have fixed my issue. It didn't have anything to do with an issue with asynchronous calls but with how I had defined my route and the component. See below code for fix. Thanks again.</p>