Angular component syntax, callback function called with wrong context

I'm working on an angular app using the NG6-Starter boilerplate.

Now, i've got one component with another component inside it, and i'm sending a callback function to the inner component via an attribute. This is how i'm initializing the inner component:

<div>
<location-form location='vm.location' submit-callback='vm.addLocation'>
</location-form>
</div>

The addLocation function on the parent controller gets called, but the problem is it's being called with this being the controller of the child component (location-form).

I tried using bind, but angular has issues with that.. Any ideas?

Component definition:

import template from './locationForm.html';
import controller from './locationForm.controller';
import './locationForm.styl';

let locationFormComponent = {
  restrict: 'E',
  bindings: {
    location: '=',
    submitCallback: '=',
    parentController: '='
  },
  template,
  controller,
  controllerAs: 'vm'
};

export default locationFormComponent;

Controller:

<form ng-submit="vm.submitCallback(vm.location)">
     ...
      <button type="submit" class="btn btn-default">Submit</button>
</form>

Thanks, Uri