Pass getterSetter to directive

I’m working with AngularJS and i want to extract a form field into a directive. This field is using as ngmodel a GetterSetter; a function which modifies the real field in the main controller when the user is typing something, or just returns the value. It’s working fine, using these properties on the input:

ng-model="vm.formfields.MyGetterSetter"
ng-model-options="{ getterSetter: true }"

with MyGetterSetter being:

MyGetterSetter: bar(),

But to extract it, i want to use the MyGetterSetter of the main controller, and not to have to move the function to the directive controller. It’s because there are some common behavior in the main controller and i want to keep the GetterSetter there So i want to pass this MyGetterSetter as parameter:

<my-directive foo="vm.formfields.MyGetterSetter"></m-directive>

and

function MyDirective() {
    return {
        templateUrl: '...',
        controller: 'MyDirectiveController',
        controllerAs: 'vmDirective',
        bindToController: true,
        scope: {
            foo: '='
        },
        require: ['^form'],

        link: function(scope, element, attrs, ctrls) {
            scope.form = ctrls[0];
        }
    };
}

And in my directive html:

<select type="text"
        class="form-control"
        id="myId"
        name="myName"
        ng-model="vmDirective.foo"
        ng-required="true">
    <option value=""></option>
    ...
</select>

=> My issue is that the binding to the gettersetter is not working; when i enter a value in the field, i see that instead of a function, it’s considering foo as a variable and assign the value to it. If i use a “&” instead of the “=” for foo, it’s passing a function type but it’s not calling the gettersetter of the main controller anyway. I also tried to use ng-change, or to use parenthesis to pass foo, that kind of stuff but no idea why it’s not working as intended.

Any idea? 🙂

Source: New feed
Source Url Pass getterSetter to directive