Angular directive can not scope ng-model

Question

I'm trying to fill a form with existing values using the controller $scope to pass those to the DOM. Now, I'm using a directive to read and write values in a specific select menu (where I use bootstrap form helpers) menu:

app.directive('currencypicker', function () {
    return {
        restrict: 'A',
        require: '?ngModel',
        scope: {
            ngModel: '='
        },
     link: function (scope, elem, attrs, ctrl) {
         elem.addClass('bfh-currencies');
         elem.addClass('bfh-selectbox');

         elem.bfhselectbox({
             filter: (elem.attr('data-filter') == 'true') ? true : false
         }).on('change.bfhselectbox', function() {
            return scope.$apply(function () {
                return scope.ngModel = elem.val();
            });
         });

         return elem.bfhcurrencies({
             flags: (elem.attr('data-flags') == 'true') ? true : false,
             currency: scope.ngModel || 'EUR'
         });
       }
    };
});

Here the HTML snippet

<div currencypicker id="cost-currency" data-flags="true" data-filter="true" ng-model="newEvent.cost_currency"></div>

The problem is that when I try to assign my model value to currency attribute with scope.ngModel it evaluates always to undefined and so 'EUR' value is assigned, I checked my scope with firebug, where ngModel value is "GBP". I can't figure out why it happens.

Answer 1

The way you have to use your directive is the following :

app.directive('currencypicker', function () {
    return {
        restrict: 'A',
        require: '?ngModel',
        //template : you have no template nor url template?
        link: function (scope, elem, attrs, ngModelCtrl) {

            // You can have your "ngModelValue" into ngModelCtrl.$viewValue

            // Also, you now have access to all the functions declared into ngModelController
        }
    };
});

And if you want more information on that topic, do not hesitate to have a look at the doc : https://docs.angularjs.org/api/ng/type/ngModel.NgModelController